a
Webdesign, a web használhatósági kérdései
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
Web ergonómia
-
y discoveredthat variouscomplexsystemshave ..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. mportant impli~ationsfor a hostof s,from drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
Interakció tervezés THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
-
y discoveredthat variouscomplexsystemshave ..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. mportant impli~ationsfor a hostof s,from drugdevelopmentto Internet security BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
HCI alapok
Interakció tervezés
3 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
•
Meghatározás Designing interactive products to support people in their everyday and working lives Sharp, Rogers and Preece (2002) The design of spaces for human communication and interaction Winograd (1997) scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies.Célok tant impli~ationsfor a hostof Használható termékek el!állítása m drugdevelopmentto Internet security Felhasználók bevonása a tervezési folyamatba
a
a
• •
•
• •
• •
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
4 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Interakció tervezés és a kapcsolódó területek
using like colors for similar Web addresses.
Academic disciplines (e.g. computer science, psychology)
-
Design practices (e.g. graphic design) Interaction Design
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
Interdisciplinary fields (e.g HCI, CSCW)
a
HCI tudomány
5 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
-
• Human-computer interaction (HCI) is • “concerned with the design, evaluation
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them”
• (ACM SIGCHI, 1992)
MAY 2003
6
HCI kognitív keretei
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• kognitív modellezési szintek • percepció • magasabb szint" mentális
using like colors for similar Web addresses.
-
modellek
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
Professzionális interakció tervezés
7 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
•
using like colors for similar Web addresses.
interaction designers people involved in the design of all the interactive aspects of a product usability engineers people who focus on evaluating products, using usability methods and principles web designers people who develop and create the visual design of websites, such as layouts information architects scoveredthat variouscomplexsystemshave people who come up with ideas of how to plan and structure J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. interactive products tant impli~ationsfor a hostof m drugdevelopmentto Internet security user experience designers BYALBERT-U\SZLO BARABASI ANDERICBONABEAU people who do all the above but who may also carry out field studies to inform the design of products
•
a
a
• • •
• • • • •
MAY 2003
8 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Koncepcionális modellek
• Tervez! koncepcionális modellje • Felhasználó által kialakított mentális modell • Interfész modell transzlációs képessége, modell bonyolultsága • Modell diszparitás
using like colors for similar Web addresses.
-
=> csökkent használhatóság
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
Tervezési modell
?
Tervez!
Felhasználó
Rendszerkép Interfész
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
Rendszer
MAY 2003
Felh. mentális modellje
a
9 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
•
using like colors for similar Web addresses.
-
•
Az elmélet átvitele a gyakorlatba elméletek => absztrakciók -> jelenségek tanulmányozása
• • •
generatív elméletek érvényességi területek
gyakorlati eszközök
• • • •
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
magyarázatok
tervezési elvek tervezési szabályok elemzési módszerek min!ségi értékelési módszerek
Tervezési elvek
10 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• •
using like colors for similar Web addresses.
elméleti, tapasztalati és józan ész alapján kialkított elvek, el!írások felhasználás: design kialakítása láthatóság menük, MSO#ce visszacsatolás progress bars kényszerek szürke menü elemek, varázslók next-prev scoveredthat variouscomplexsystemshave gombjai J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof leképezés m drugdevelopmentto Internet security irány gombok pozíciója BYALBERT-U\SZLO BARABASI ANDERICBONABEAU utalás (a$ordance) gombok, slider
a
MAY 2003
• • • • • • • • • •
a
Tervezési minták (Design patterns)
11 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• közös tervezési “szótár” • pattern language • nem létrehozzák; azonosítják • invariáns értékek • struktúráltak • formális dokumentálási keret • pattern format
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
Design principles, frameworks
Pattern language
Design guidelines
Concrete deployed systems
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
Web használhatósági tervezési minták (pl.)
12 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Pattern: Required Field Markers • Problem: ensuring that end user provides essential information • Classification: User interface widget • Solution: clearly label required fields, make sure that all fields are really necessary • Related patterns: client-side validation,
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
server-side validation, what they see is all they get
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
Design patterns
Web design THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
a
-
y discoveredthat variouscomplexsystemshave ..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. mportant impli~ationsfor a hostof s,from drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
14 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Verseny a felhasználókért
• rögtön szembesül a használhatósággal • oldalak milliói állhatnak rendelkezésre • a használhatóság könnyen mérhet!
using like colors for similar Web addresses.
-
gazdasági következményekkel
• m"vészi vagy mérnöki megközelítés • szabályok • ajánlások
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
15 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Vállalatok problémái a Webbel
• csak egy katalógus • webes projekt kezelése vállalati
using like colors for similar Web addresses.
-
projektként
• bels! struktúrákat tükröz! információ elrendezés
• tartalom tervezés • spec. médium spec. stílussal • hivatkozási stratégia
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
=> speciális megközelítést kíván
16 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Klasszikus web használat • információs munkatér • információs munka • kognitív munka • információ átalakítás • munka, tanulás, szabadid! • információ visszakeresés • kollaboráció
using like colors for similar Web addresses.
-
Web site használhatóság
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
17 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Web site használhatóság (folyt.)
• Új típusú web használat • Jelenlét (home location) • weblogs • Összekapcsolódás (aggregation, syndication) • RSS • Felfedezés (search engines) • Google • Kommunikáció (messaging) • ICQ
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
18 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Web használhatósági tényez!k
• cél közönség • felhasználói profil • site kategória • kereskedelem • információ • szórakozás • ego alapú site • tartalom • metafora • szerkezet • navigáció • technológia
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
19
Information foraging
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• információ gy"jtés ökológiai modellje • magas szint" webes interakció modell • információ költség szerkezete • információban gazdag területek • gy"jtögetés • információban szegény területek • keresés • információ nyom (szimat)
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
20
Information foraging
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
Nyereség R2 R1
tB1 Foltok-közötti id!
tB2
Határ haszon g(tw) Nyereség függvény
t2 t1 Folton-belüli id!
Foltok-közötti nyomjavítás
Nyereség
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
g2(tw) Folton-belüli dúsítás
R2
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
g1(tw)
R1 tB
MAY 2003
Foltok-közötti id!
t2 t1 Folton-belüli id!
a
Info foraging (pl.)
Information Foraging
21
•
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Információ feldolgozási feladat • költség szerkezet • patch density • információ folyam • keresési tér redukciója • info keresés • info fogyasztás
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
16
The sorting of articles within piles to produce the 1” subpiles at the top of the 12” piles serves to further reduce foraging costs over and above the layout of piles discussed next.
Desk
Shelf
Desk
Active Project Piles Computer Reference Area Figure 2. Schematic layout of the Business Intelligence office. Physical Workspace The analyst’s workspace was set up so as to allow his tasks to proceed with efficiency. Figure 2 gives a schematic picture of the space. There is a primary workspace where the analyst sits and can work on his computer together with place for several piles or pages to be placed. On the surfaces surrounding this primary place is a secondary area of surfaces where other piles can be placed. Several projects have more than one file; in each case, there is a main pile associated with some other information, such as related books or articles that should get filed. We identified four such pile groups plus a small set of piles on shelves related to social activities. These open pile groups allow the analyst to switch quickly among his major tasks. Surrounding this area is a set
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
22 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Information foraging és a Web
• felhasználók • releváns oldalak találati rátája • információ források (szerverek) • oldalak attraktívitása • magas info tartalmú foltok rendezetlen halmaza • szerver oldali megoldások • indexelt tartalom (Lycos) • tematikus listák (Yahoo) • link gy"jtemények • kliens oldal • hierarchikus könyvjelz!k
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
23
Info nyom (scent)
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• utalások az információ min!ségére a nyom követéséhez • web navigáció: • proximális nyom - disztális info • keres! gépek (between patch) • link kontextus • link követés (in patch) • link által hodozott utalások • cél környezet • URL • távolság (link szám)
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
24 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• médiumhoz kötött patternek • saját szociális dinamika • felhasználói felület patternek • formok • láthatóság • rendszer patternek • kliens - szerver funkciók szétválasztása • sávszélesség meggondolások
using like colors for similar Web addresses.
-
Web használhatósági patternek
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
Környezet-pszichológia
25 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• web interakciós referencia modell • böngészéssel kapcsolatos tényez!k
using like colors for similar Web addresses.
-
(taszk független, emocionális hatások)
• környezeti interakciókkal azonosak
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
• 3 fázisú interakció
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
26 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Környezet-pszichológia (folyt.) Environmental Psychology of Web Pages
using like colors for similar Web addresses.
ENVIRONMENT - Complexity - Coherence - Spatial configuration
-
- Mystery - Wayfinding
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
- Relation between purpose and overall impression
1. Initial encounter with Environment
Aesthetics
2. Navigation/Information Gathering
Aesthetics & Functionality
3. Decision-making-process
Overall Impression
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
FUNCTIONALITY MAY 2003
Fig. 9: General model of interaction with web pages.
The model illustrates the three different levels/stages in the perception of- and interaction with an environment. In this particular study, the surrounding computerbased environment (labelled environment in the model) has been consisted by web
Információ “építészet”
27 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• •
using like colors for similar Web addresses.
site tervezési megközelítés nagy site-ok problémái: megtalálhatóság navigálhatóság redundancia, hiányzó adatok, elavultság look and feel elveszik az alsóbb szinteken hozzáférés szabályozás megoldása megoldási lehet!ségek scoveredthat variouscomplexsystemshave tartalom kategorizálás J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. eV\Z* d[* L]nNdjgLZWH^iZCZZYh?d\ehcWj_ed7hY^_j[Yjkh[ tant impli~ationsfor a hostof m drugdevelopmentto Internet security hierarchiák kialakítása browse optimalizált szerkezet AND GOALS AS WELL AS CONDUCTING ONE ON ONE USABILITY TESTS TO DETERMINE HOW KEY TASKS ARE COMPLETED /NCE PROBLEM AREAS ARE IDENTIl ED SPECIl C METHODS FOR vizuális tervezés és alkalmazása a IMPROVING USABILITY CAN BE APPLIED hierarchiára ?dl[djehoWdZeh]Wd_p[oekhYedj[dj$)T IS IMPORTANT TO CLOSELY ANALYZE THE CONTENT
• • • • • • • • • •
a
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
THAT WILL POPULATE YOUR 7EB SITE 7E TAKE STOCK OF THE TYPES AND FORMATS OF CONTENT ON YOUR CURRENT SITE NOTING REDUNDANT AND OUTDATED INFORMATION AND DETERMINE WHERE THERE ARE GAPS BASED ON WHAT USERS NEED &ROM SUCH CONTENT ANALYSES WE RECOMMEND WAYS TO ORGANIZE INFORMATION BY CATEGORY AND HIERARCHY AND DETERMINE HOW CONTENT ITEMS WITHIN CATEGORIES RELATE TO EACH OTHER 9h[Wj[W\ekdZWj_ed\ehWl_ikWbZ[i_]dioij[c$3UCCESSFUL EXECUTION OF A SITES
LOOK AND FEEL IS EASIEST ON THE HOME PAGE AND OTHER PAGES THAT ARE RELATIVELY HIGH WITHIN THE HIERARCHY -AKING SURE THAT BRANDING AND VISUAL DESIGN IS EQUALLY AS STRONG AT THE LOWEST PAGE LEVEL IS A BIGGER CHALLENGE $El NING THE STRUCTURE OF A SITE
Információ “építészet”
?d\ehcWj_edWhY^_j[Yjkh[WdZl_ikWb[nfbWdWj_ed0C?JFh[ii9e]D[j
7E ALWAYS USE DIAGRAMS AND VISUAL EXPLANATIONS TO MAKE OUR INFORMATION ARCHITECTURES CLEARER AND MORE
28 ACCESSIBLE $IAGRAMS BRING OUT DETAILS AND SHOW CONNECTIONS THAT ARE OTHERWISE EASY TO MISS Webtechnológia 1 7E CREATED THE FOLLOWING DIAGRAMS FOR #OG.ET AN ONLINE COMMUNITY OF SCHOLARLY RESEARCH IN THE COGNITIVE
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
AND BRAIN SCIENCES HOSTED BY -)4 0RESS THE PUBLISHING ARM OF THE -ASSACHUSETTS )NSTITUTE OF 4ECHNOLOGY
using like colors for similar Web addresses.
M[Xi_j[fbWdd_d]Z_W]hWc$
L]nNdjgLZWH^iZCZZYh
?d\ehcWj_ed7hY^_j[Yjkh[
-
69ncVb^X9^V\gVbhL]^iZEVeZg WnA^hV6\jhi^c!HZc^dg>c[dgbVi^dc6gX]^iZXi VcY=ZcgnLddYWjgn!HZc^dgLZW9Zh^\cZg DXidWZg'%%(
0LANNING DIAGRAMS ILLUSTRATE THE CONTENT ORGANIZATION AND HIERARCHY OF A SITE AT A HIGH LEVEL 4HIS DIAGRAM SHOWS OUR PROPOSED INFORMATION ARCHITECTURE FOR REORGANIZING #OG.ETS COMMUNITY FEATURES AND MORE CLOSELY LINKING THEM TO THE REST OF THE SITE
scoveredthat variouscomplexsystemshave FW][XbeYaZ_W]hWc$0AGE BLOCK DIAGRAMS J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. SHOW AN INFORMATION ARCHITECTURE AT THE tant impli~ationsfor a hostof USERS LEVEL 4HIS DIAGRAM IS ONE OF SEVERAL m drugdevelopmentto Internet security WE CREATED FOR DIFFERENT CONTENT AREAS OF BYALBERT-U\SZLO BARABASI ANDERICBONABEAU THE #OG.ET SITE 4HE DIAGRAM SHOWS THE
STRUCTURE OF A JOURNAL ARTICLE ABSTRACT PAGE WITH A COMPLETE MAP OF ITS LINKS TO OTHER PARTS OF #OG.ET AND TO EXTERNAL 7EB SITES MAY 2003
9ncVb^X9^V\gVbh!>cX#lll#YncVb^XY^V\gVbh#XdbiZa# )%&''(&'((
9ncVb^X9^V\gVbh!>cX#lll#YncVb^XY^V\gVbh#XdbiZa# )%&''(&'((
a
29 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Információ építészet és interfész kialakítás
• Nincs rögzített HTML UI alap • túl általános irányvonalak • túl specifikus szabványok UI elemekre • Réteges keretrendszer • web sajátosságok figyelembevétele • lap orientáció • freeform layout • spec. navigációs szerkezetek • alkalmazhatóság az információ
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
architektúrán
MAY 2003
Információ építészet és interfész kialakítás
The Elements of User Experience
A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond 30 the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among THE INTERNET,mapped on the opposite page, is a scale-free network in that Webtechnológia 1 some siteS (starbursts and detail above) have a various seemingly unlimited these elements.
Jesse James Garrett
[email protected] 30 March 2000
number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
Web as software interface
Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding
Information Design Interaction Information Design Architecture Functional Content Specifications Requirements
Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs
scoveredthat variouscomplexsystemshave Userng Needs: externally derived goals J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili principies. for the site; identified through user research, tant impli~ationsfor a hostof ethno/techno/psychographics, etc. m drugdevelopmentto Internet security Site Objectives: business, creative, or other Abstract
Information Architecture: structural design of the information space to facilitate intuitive access to content Content Requirements: definition of content elements required in the site in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site
User Needs Site Objectives
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU internally derived goals for the site
task-oriented
Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding
Interface Design Navigation Design
Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality
Web as hypertext system Visual Design: visual treatment of text, graphic page elements and navigational components
Visual Design
Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel")
-
Completion
Concrete
time
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
Conception
information-oriented
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. MAY 2003
© 2000 Jesse James Garrett
http://www.jjg.net/ia/
a
31 Webtechnológia 1
Információ építészet és interfész kialakítás (pl.)
!"#$%&'($)'*+"),-,./' THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
!"#'0112&'34('5678963:'
!"#$%&'()'*+,-.&'/$"0&."1&2'34,-41&1526'7+#&'8&,-.+5&6'9'7+#&'!.4:''
!
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
Oracle Portal MAY 2003
"#$%&'()*! +&*,-#! .+)/! %)*0$1'(*,! 2('3! 4+)#$%'! '-&/0! ')! %1&00+))/! 1-%'$+-0! )*! '3-! ,$(#-1(*-05! ! 6*! '3-! -&+17! #&70! ).! #(00-/(*&'(*,!'3-!(*.)+/&'()*8!'3-!1-&#!,$(#-1(*-0!#-0(,*-+! #-9-1)4-#! 1&+,-:0%&1-! %1&00+))/! 1-%'$+-0! ')! (*'+)#$%-! 23)1-! #(9(0()*0! ')! '3-! ,$(#-1(*-05! ! ;3-0-! 1-%'$+-0! 2-+-! ).'-*!'&(1)+-#!')!&!4&+'(%$1&+!#)/&(*8!-5,58!3$/&*!+-0)$+%-05!! 6*! &*! )*,)(*,! %&4&%('78! <6! '-&/0! 4+)9(#-#! )*-:)*:)*-! %)*0$1'(*,! ')! 4+)#$%'! '-&/05! ;3(0! '74(%&117! (*%1$#-#! '+&*01&'(*,! &! 4+)#$%'=0! (*.)+/&'()*! &+%3('-%'$+-! &*#! '&0>! .1)20!(*')!&!,$(#-1(*-=0!%)/41(&*'!(*'-+.&%-!#-0(,*5!?(*&1178! &! @-A:A&0-#! 0-1.:0'$#7! %)$+0-! 2&0! %+-&'-#! .)+! '3-! /&*7! #-9-1)4-+0!2-!2-+-!$*&A1-!')!+-&%3!)*-:)*:)*-5!!!! B))+#(*&'()*! '))>! '3-! .)+/! ).C! &D! +-E$(+-/-*'0! ,&'3-+(*,! &%+)00! 4+)#$%'0! &*#! $0-+! 4+).(1-08! AD! #-9-1)4/-*'! ).! +-: $0&A1-!<6!%)#-8!%D!$0&A(1('7!'-0'(*,!).!'3-!,$(#-1(*-08!&*#!#D! (*#(9(#$&1! 4+)#$%'! +-9(-205! ! F-E$(+-/-*'0! ,&'3-+(*,! )%%$++-#! 2-->178! &*#! 2&0! &*! )*,)(*,! 4+)%-00! #-0(,*-#! ')!
32!!
492
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
IA tervezési formalizmusok
Volume No. 5, Issue No. 1
using like colors for similar Web addresses.
-
• Concept maps • Wireframes • Story boards • Block diagrams • Flow maps
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
! '+&%>! *--#-#! %3&*,-08! (#-*'(.7! -*3&*%-/-*'0! ')! -G(0'(*,! ,$(#-1(*-08!&*#!4$03!*-2!*--#0!(*')!'3-!*-G'!9-+0()*!).!'3-! ,$(#-1(*-05! ! H! +-:$0&A1-! <6! %)#-! A&0-! 2&0! #-9-1)4-#! ')! -&0-!&#)4'()*!).!'3-!,$(#-1(*-08!&*#!-*3&*%-!%)*0(0'-*%7!).! (/41-/-*'&'()*5! ! H! '-&/! 2&0! &00(,*-#! 2('3(*! I+&%1-! ')! #-9-1)4! +-:$0&A1-! <6!%)#-!A&0-#!)*!'3-!,$(#-1(*-05!!B1)0-! %))+#(*&'()*!&*#!%)11&A)+&'()*!2('3!'3(0!'-&/!3&0!4+)#$%-#! 0$%%-00.$1!&#)4'()*!).!'3-!,$(#-1(*-0!%)#-!J3)2!2-!#-.(*-! K0$%%-00=! 2(11! A-! &##+-00-#! 1&'-+! (*! '3-! 4&4-+D5! ! ;)! %3-%>! '3-! 9&1(#('7! ).! ,$(#-1(*-08! %))+#(*&'()*! 2('3! $0&A(1('7! -*,(*--+0! 4+)9(#-#! '3-! )44)+'$*('7! ')! %)*#$%'! A)'3! 4+)#$%':! &*#! ,$(#-1(*-0:04-%(.(%! $0&A(1('7! '-0'05! ! ?(*&1178! 4+)#$%'! <6! +-9(-20! )%%$++-#! &'! &11! 1-9-108! +&*,(*,! .+)/! (*.)+/&1!+-9(-20!2('3!&!<6!#-0(,*-+!')!.)+/&1!+-9(-20!2('3! )$+!#-4&+'/-*'!9(%-!4+-0(#-*'5!!!!!!! B)//$*(%&'()*! )%%$++-#! A)'3! 2('3! '3-! <0&A(1('7! &*#! 6*'-+.&%-! L-0(,*! #-4&+'/-*'8! &*#! 2('3! '3-! 4+)#$%'! '-&/0!
a
Flow maps
33 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Matt Leacock
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
Flow maps
34 Webtechnológia 1
IA Visual Vocabulary Cheat Sheet Conditional Elements
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
•
using like colors for similar Web addresses.
Jesse James Garrett
Conditional elements are useful for showing how the information architecture varies depending on conditional logic (system evaluates attributes such as user type, login status or subject matter in order to create user paths). Conditional Connector: System may or may not provide path to user (based on preexisting conditions)
metafilter.com page 1
Web page Web page
logout (1f)
Web page
Conditional Area: One or more conditions applies to a group of pages. These areas are associated with a result generated if conditions not fulfilled.
home
-
login new user
customize
post topic
(1a)
search
archive index
(1b)
continue to: about changelog metatalk
Decision Point: User action may generate one of a number of results for a given path.
JavaScript required Web page
Error page
Web page
Error page Login Member page
edit user prefs
login/register
post new topic
results
archive by month
Concurrent Set: User action generates multiple, simultaneous results.
File download Web page Install instructions
revise prefs
new prefs confirmed
preview post
(1c)
(1d)
Conditional Branch: Same as decision point, but system decides result previous to user action (a single path is presented to user).
(1e)
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
Conditional Selector: Same as branch, but paths are not mutually exclusive.
NOTES
BYALBERT-U\SZLO BARABASI (1a) If userANDERICBONABEAU is logged in, return edit user prefs. If user is
not logged in, return login. (1b) If user is logged in, return post new topic. If user is not logged in, return login. (1c) Display links to topics posted in the last n days, where n is defined in user prefs. For users not logged in, n=7. (1d) Display links to topics matching search criteria. (1e) Display links to topics posted in selected month. (1f) If user is logged in, logout function is available.
For members
Web page For new users
Result 1 Search results Result 2
continue to: thread
Jesse James Garrett http://www.jjg.net/ia/visvocab/
Cluster: System allows more than one path for certain conditions. Appears downstream from conditional.
For members
Web page
For new users 1
For new users 2
MAY 2003 Created by Scott Larson (
[email protected]). Based on work by Jesse James Garrett
a
35
Wireframes
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
36 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• tartalom - beviteli "rlapok • információk - taszkok • linkek - akció gombok • további eltérések • keresés • ablak címek • keretek • scrollozás • browser kompatibilitás
using like colors for similar Web addresses.
-
Website vs. web alkalmazás
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
Speciális tranzakciós felületek
37 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• HTML interfész elégtelen
using like colors for similar Web addresses.
Laszlo-based applications exhibit a fluidity and responsiveness that is at first startling to people accustomed to conventional transaction-driven Web sites. The responsiveness stems from the increased proportion of code that is executed client-side rather than server-side. The fluid feel of a Laszlo application can be attributed to several factors. Users notice the dynamic communication of application status. This is made possible by real-time notification and messaging, and is devoid of the disorienting page refresh associated with the Web paradigm. Users stay better focused on their task thanks to the visual continuity of interface state changes. These transitions are supported by the Laszlo Foundation Classes, which provide the foundation for a Cinematic User Experience. Finally, users can interpret application functionality more easily due to the clarity of a single presentation canvas unifying all application modules, interface elements, data types and media assets. The sum effect is an application that rivals, and in many cases exceeds, the usability of desktop client software.
-
(Fig. D) Architecture Overview: Next Generation Web Applications ,ASZLO 0RESENTATION 3ERVER l TS INTO EXISTING *AVA SERVER INFRASTRUCTURE COMMUNICATES
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
WITH EXTERNAL SOURCES VIA 8-, AND DELIVERS THE RESULTING APPLICATION IN ANY OF TODAYS POPULAR BROWSERS
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
To make the above both possible and viable today, Laszlo judiciously leverages prevailing standards, technologies and practices. The primary elements of the Laszlo Application Platform are described below: a. To insure simple integration of the Laszlo Presentation Server into modern IT infrastructures, the technology is designed to operate within standard J2EE development and deployment environments. The Laszlo Presentation Server executes as a Java servlet within a standard J2EE Application Server or Java servlet container. b. To minimize hurdles facing the distribution of a deployed application, the Laszlo solution does not require users to install any new client software. This is accomplished by compiling Laszlo source code into bytecode that executes in the Macromedia Flash 5 or 6 Player Plug-in. Besides being ubiquitously deployed, the Flash run time is also a very compact, efficient rendering engine that has proven secure and consistent across multiple browsers, operating systems and device types.
Oldal tervezés
c. Finally, to maximize the productivity of professional Web/IT developers, Laszlo applications are described using Laszlo’s XML application description language, LZX, via a workflow analogous to HTML Web development. Laszlo’s authoring methodology encourages the natural separation of the presentation layer from business logic, paving the way for a world filled with multiple Internet device types running the same app, and subscribing to XML Web services. The overall solution focuses on the needs of professional systems development organizations, where multi-developer teams typically rely on text-dependent code search and revision control tools to build and maintain enterprise-class IT systems.
38 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• képerny! terület kihasználása • példa: • browser 11,6% • navigáció 44,5% • tartalom 8,5% • üres 31,4%
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
,ASZLO 3YSTEMS .EXT 'ENERATION 7EB !PPLICATIONS
a
Oldal tervezés (folyt.)
39 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• képerny! terület kihasználása -
using like colors for similar Web addresses.
kognitív háttér (korai látórendszer)
• CODE theory of visual attn. • pop-out e$ecst • vizuális indexelés • medial-point representation
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
40 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Oldal tervezés (folyt.)
• platform függetlenség • felbontás függetlenség • browser függetlenség • gyártó • verzió • op.rendszer függetlenség
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
sávszélesség szerver sebesség
a
41 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
-
• link leírások • a link szövege • magyarázó szöveg • link title • oldalnév • site-rész • link tulajdonság • link színek • reklám linkek
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
Oldal tervezés Linkek
Link? (no affordance)
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
42
Tartalom tervezés
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Szövegek • tömörség • áttekinthet!ség • több oldalra tördelés • objektív nyelvezet • felsorolások, listákkal • kiemelések (link!) • olvashatóság (viz. ergonómia)
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
Tartalom tervezés (folyt.)
43 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Multimédia • zsúfoltság • válaszid!k • miniat"r képek • lényegkiemel! képkicsinyítés • zoom és vágás • animációk • id!beli folyamatok • változások, átmenetek (context) • csatolt nézetek (image maps)
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
Tartalom tervezés
44 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Thumbnails (lényeg kiemel!
using like colors for similar Web addresses.
kicsinyítés)
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
Site tervezés
45 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• site kezd!oldala • nem kell beköszön! oldal • spec. alk. • felhasználók sz"rése • nyelvválasztás • nem kell under construction oldal • fontos adatok • fontos funkciók • “3 clicks or you are out”
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
46
Site tervezés (folyt.)
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• Metaforák alkalmazása • egységes keret a designnak • könnyebb tanulhatóság • földrajzi metaforák • „érdekes” metaforák • bevásárlókocsi
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
47
Site tervezés (folyt.)
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
•
Navigáció információ gy"jtögetés (information foraging) cost structure of info alap tevékenységek keresés (between patch) böngészés (within patch) focus+context megoldások hol vagyok? scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. merre lehet menni? tant impli~ationsfor a hostof m drugdevelopmentto Internet security hogy lehet oda menni? site mapek info viz.
•
a
a
•
• •
• •
• • • • •
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
48
Site tervezés (folyt.)
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• hypermédia struktúrák • lineáris • opciók • diverziók • grid • hierarchikus • web
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
Site tervezés (pl.)
49 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• www.sze.hu • edu site • publikálási hajlam • sok kis részszervezet • nem centralizált, koordinálatlan
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
növekedés
• tipikus WWW struktúra kicsiben
50
Site tervezés (pl.)
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
-
• Statisztikai adatok • crawler robot • <=8 kattintásnyira a kezd! oldaltól
• oldal: 7997 • link: 51220 • hosztok: 20
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
• Hatvány fv. eloszlású linkszám az
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
oldalakhoz
10000
1000
100
10
MAY 2003 1 1
10
100
1000
10000
a
Site tervezés (pl.)
51 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof kézzel kialakított link szerkezet a m drugdevelopmentto Internet security központi magban
a
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU(3
link mélység)
PHP link szerkezet egy portálon (5 link mélység)
MAY 2003
52
Kísérleti browserek
Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
• WebBook, WebForager • kliens oldali költség struktúra kialakítása
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
a
53 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others, using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
a
Kísérleti browserek (folyt.)
Hyperbolic tree Site map
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
Popout Prism browser
MAY 2003
54 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Site használhatósági elemzés
• Szabály alapú • pl. szintaxis vezérelt • Empírikus • adatgy"jtés aktuáis felhasználóktól • Modell alapú • site és task absztrakt modelljére épített
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
elemzés
a
55 Webtechnológia 1
THE INTERNET,mapped on the opposite page, is a scale-free network in that some siteS (starbursts and detail above) have a seemingly unlimited number of connections to other sites. This map, made on February 6, 2003, traces the shortest routes from a test Web sinHo about 100,000 others,
Site használhatósági elemzés
• Adat gy"jtés • Online kérd!ívek • Szerver log adatbányászat • trail • info scent • Keres!gép log elemzése
!"##$%&'(")*+!"##$)',%*+-)%+.+/01/2+%&3"(+/00/+++++++++++++++++++++++++++++++++++++++45'3,+6%(78+9#+,5$+:'+;+<$)"=
using like colors for similar Web addresses.
-
scoveredthat variouscomplexsystemshave J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. tant impli~ationsfor a hostof m drugdevelopmentto Internet security
BYALBERT-U\SZLO BARABASI ANDERICBONABEAU
MAY 2003
)%*+,&%' • M'$,#"&$*5,8.#,*7."+*RST** • P.*8.#4"#+*56$$.'*RUT*
!
5"2&'-&,"#4' !71,&13'/*891&2&:'27,;*RWT* <*4#':*+41*7:'2"8&,*RWT** ="4#>9*4#'?&@7."*%*RST* M'$,#"&$*5,8.#,*7."+*RST** 6**'8$/@',/%*11"4#*RUT** K"=,* "++#,((* 86'&$%.'"7%$? '.$*&7,"#*R@T** • )7/;'?$22*4'47."#72"*4*RVT • >.67+*7%9,*1.#,*8,"$6#,(*RVT • F%'+(*(%$,*6(,867*RVT* 67?1&'(O* G"&0*&,77*%'*$0%(*$"5 7%($,+)* "7.'-* 4%$0* %$(* (,=,#%$?* %'+%&"$%'-* %((6,(* 8.6'+* %'* $0,* "!!,"#*%'*1.#,*$0"'*.',*&"$,-.#? • • • • • •
* !"#$%&' (O* 30,* >,5D6%7$* =%(6"7%/"$%.'2* P.+,(* #,!#,(,'$* =%(%$,+* 4,5* !"-,()*"'+*"##.4(*#,!#,(,'$*$0,*$#"88%&*5,$4,,'*$0,*!"-,(2*G'$#?*!"-,(*"#,* &.7.#,+* -#,,')* "'+* ,C%$* !"-,(* &?"'2* 30%&9,#* "##.4(* #,!#,(,'$%'-* 0,"=%,#* $#"88%&2* <##.4* &.7.#* %(* 6(,+* $.* %'+%&"$,* $%1,* (!,'$* .'* "* !"-,* 5,8.#,* $#"'(%$%.'%'-)* 40,#,* $0,* &7.(,#* $0,* "##.4* $.* #,+)* $0,* 7.'-,#* (!,'$* %'* $#"'(%$%.'2*30,*+,(%-',#Q(*!"$0*%(*0%-07%-0$,+*%'*576,2*30,*(7%+,#*%'$,#8"&,* "7.'-* $0,* 7,8$* 0"'+* (%+,* "77.4(* $0,* +,(%-',#* $.* /..1* %'$.* $0,* -#"!0)* =%,4%'-*"&$6"7*%1"-,(*.8*$0,*!"-,(*6(,#(*("4)*"'+*40,#,*$0,?*&7%&9,+2*
!"#$%&%!"'$()* "'+* &"$,-.#%/,+* $0,12* 30,* &"$,-.#%,(* 4,#,* 5"(,+* .'* 40,$0,#* .#* '.$* $0,* %((6,(* 4,#,* #,7"$,+* $.* $0,* $,($%'-* 8#"1,4.#9)* $.* $0,* +,(%-'* .8* $0,* 4,5* (%$,)* $.* $0,* :;<*4,5*5#.4(,#)*.#*$.*%'$,#"&$%.'(*4%$0*$0,*+,=%&,*%$(,782* >,* "7(.* #,&.#+,+* 40,'* "'+* 40,#,* $0,* %((6,* .&&6##,+)* $0,* $.$"7* '615,#* .8* !"#$%&%!"'$(* ,'&.6'$,#%'-* ,"&0* %((6,)* %$(* %1!7%&"$%.'()*"'+*8%'"77?*"((%-',+*$0,*%((6,*"*(,=,#%$?*#"$%'-* 8#.1* @AB)* .#* "* /,#.* %8* $0,* %((6,* 4"(* .'7?* "* &.11,'$2* 30,* ("1,* ,C!,#%1,'$,#* &7"((%8%,+* $0,* >,5D6%7$* +"$"* (%1%7"#7?)* 6(%'-* $0,* =%(6"7%/"$%.'* "'+* E6,($%.''"%#,* +"$"* "7.',* $.* %+,'$%8?*%((6,(2* !"#$"#%&'(#$'(#()*&"&'
F.#* $0,* G+16'+(2&.1* $"(9)* 4,* 8.6'+* "* $.$"7* .8* @H* %((6,()* (611"#%/,+*%'*3"57,*@2*<77*@H*%((6,(*4,#,*8.6'+*%'*$0,*7"5* ($6+?)* "'+* .'7?* I* .8* $0,1* 4,#,* 8.6'+* 4%$0* >,5D6%7$2* J.4,=,#)* B* .8* $0,* I* +,(%-'* %((6,(* 4,#,* 8.6'+* 4%$0* >,5D6%7$)* %'&76+%'-* $0#,,* .8* $0,* 8.6#* 0%-0,#* (,=,#%$?* %((6,(2* 30,* 0%-0* (,=,#%$?* %((6,* '.$* 8.6'+* 4%$0* $0,* &7%&9($#,"1*.#*(6#=,?*+"$"*4"(*$0,*6(,#*"$$,1!$(*$.*%'$,#"&$* 4%$0*$0,*(&#,,'*5,8.#,*$0,*!"-,*8677?*#,$6#',+2** 30,* >,5D6%7$* 1,$0.+.7.-?* "7(.* #,=,"7,+* %'8.#1"$%.'* .'* $0,*$,($*+,(%-'*"'+*!#.57,1(*4%$0*$0,*+,=%&,2*K6#=,?*+"$")* 8.#* 5.$0* $0,* 7"5* "'+* $0,* #,1.$,* !"#$%&%!"'$()* %'+%&"$,+* +%88%&67$7?* #,1,15,#%'-* $0,* $"(9* +,(&#%!$%.')* "(* 4,77* "(* +%88%&67$?* (&#.77%'-2* L,&"6(,* .8* $0,* '"$6#,* .8* $0,(,* #,1.$,* $,($()* 5#.4(,#* "'+* +,=%&,* #,7"$,+* %((6,(* "#,* +%88%&67$* $.* %+,'$%8?*4%$0*>,5D6%7$*6'7,((*(!,&%8%&"77?*"++#,((,+*%'*$0,* E6,($%.''"%#,(* .#* #,!.#$,+* "(* "* &.11,'$(* 5?* $0,* !"#$%&%!"'$(2* 30,* 5#.4(,#* "'+* +,=%&,* %((6,(* 8.6'+* %'* $0%(* ,C!,#%1,'$*"&&.6'$*8.#*.',*$0%#+*.8*"77*$0,*%((6,(2** M'* 86#$0,#* $,($(* .8* $0,* (?($,1)* "* '615,#* .8* .$0,#* &.'&,#'(* "5.6$* #,1.$,* 6("5%7%$?* $,($%'-* 4,#,* #"%(,+2* M'* !"#$%&67"#)* !#.57,1(* 4%$0* #6''%'-* $0,* $,($* "#,* +%88%&67$* $.* #,(.7=,* #,1.$,7?)* "(* "#,* 6'+,#($"'+%'-* 6(,#* 1.$%="$%.'(* (6&0* "(*
+
+++
&6#%.(%$?* $.* ,C!7.#,* "#,"( &6#%.(%$?* &.67+* ,"(%7?* 5 >,5D6%7$* &"'* '.$* ,"(%7?* &" +,=%&,* $0"$* +.* '.$* &"6(,* & $06(* "&$%.'(* (6&0* "(* &7%&9( (&#,,'* 5,8.#,* $0,* &.'$,'$* %( N$0,#* !#.57,1(* .&&6#* 40, "&$6"7* $"(9(* "'+* E6,($%.'( +%88%&67$?*%(*-"$0,#%'-*$,C$*%'
!+,+-.'/0-1'(#$'20#
>,* !7"'* $.* ,C$,'+* .6#* 6(, .$0,#* 1.5%7,* +,=%&,(2* >, #,1.$,* #,&.#+%'-* 1,$0.+(* "6+%.2* >,* !7"'* .'* %'&76+%' $,($%'-* 1.#,* (%$,(* 6'+,#* #%-.#.6(*,C!,#%1,'$"7*+,(%-
34.*1"%'*&.'&76(%.'(*&"'* &7%&9($#,"1(* "'+* #,1.$,* $,( 8%'+%'-*6("5%7%$?*%((6,(*#,7"$ .'*1.5%7,*+,=%&,(2*J.4,=, $0%(* 1,$0.+.7.-?* %(* "* !..# %((6,(* 4%$0* $0,* )"*+%"* %$(,7 +,(%-'*8.#*1.5%7,*+,=%&,(*#, "(!,&$(O*&.'$,'$*+,(%-'*"'+* !#.1%(%'-* 1,$0.+(* 8.#* 6("5%7%$?* %'8.#1"$%.'* #,1.$ $.*%1!#.=,*"'+*,'0"'&,*$0,(
-.!.-.#2.&' @2*,+-"."//$01&'"$2/3#+.+(4$5" X.1!"'?O*P,4*Z.#9*X%$?2*! U2*L#"%'"#+)*[2*"'+*L2L,&9,#2*6 6.+%=/(-"3<$>+/83.+?3(+&'2*M' >+/83.+?3(+&'2*UVV@2*K"'*;%, S2*J.'-)*[2M2)*,$*"72)*,"#C8+.(9$D 5"<&("$,"#$2/3#+.+(4$G"/(+' .'*M'8.#1"$%.'*K?($,1()*UVV W2*P%,7(,')*[2*I&#+."$J"*+%"/$, 0$$!O]]44426(,%$2&.1]"7,#$5.
