Interakció tervezés. Webdesign, a web használhatósági kérdései. Web ergonómia. HCI alapok. .'~tj;i~e~tu"eg~ye'l"rne(;lb9.$ha redorganili ngprincipies.

Átírás

1 THE INTERNET,mapped on the opposite page, is a scalefree network in that Webdesign, a web használhatósági kérdései Web ergonómia dis.'~tj port,from BYALBERTU\SZLOBARABASI ANDERICBONABEAU THE INTERNET,mapped on the opposite page, is a scalefree network in that Interakció tervezés HCI alapok dis.'~tj port,from BYALBERTU\SZLOBARABASI ANDERICBONABEAU

2 THE INTERNET,mapped on the opposite page, is a scalefree network in that 3 Interakció tervezés BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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) Célok Használható termékek el!állítása Felhasználók bevonása a tervezési folyamatba THE INTERNET,mapped on the opposite page, is a scalefree network in that 4 Interakció tervezés és a kapcsolódó területek Academic disciplines (e.g. computer science, psychology) Interaction Design Design practices (e.g. graphic design) BYALBERTU\SZLOBARABASI ANDERICBONABEAU Interdisciplinary fields (e.g HCI, CSCW)

3 THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 5 HCI tudomány Humancomputer interaction (HCI) is concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them (ACM SIGCHI, 1992) THE INTERNET,mapped on the opposite page, is a scalefree network in that 6 HCI kognitív keretei kognitív modellezési szintek percepció magasabb szint" mentális modellek BYALBERTU\SZLOBARABASI ANDERICBONABEAU

4 THE INTERNET,mapped on the opposite page, is a scalefree network in that traces the shortest routes from atest WebsinHo about 100,000 others, redorganili ngprincipies. BYALBERTU\SZLOBARABASI ANDERICBONABEAU ;i~e~tu"eg~ye'l"rne(;lb9.$ha 7 Professzionális interakció tervezés 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 people who come up with ideas of how to plan and structure interactive products user experience designers people who do all the above but who may also carry out field studies to inform the design of products THE INTERNET,mapped on the opposite page, is a scalefree network in that 8 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 => csökkent használhatóság Tervezési modell Tervez!? Felh. mentális modellje Felhasználó BYALBERTU\SZLOBARABASI ANDERICBONABEAU Rendszerkép Interfész Rendszer

5 THE INTERNET,mapped on the opposite page, is a scalefree network in that BYALBERTU\SZLOBARABASI ANDERICBONABEAU 9 Az elmélet átvitele a gyakorlatba elméletek => absztrakciók > jelenségek tanulmányozása magyarázatok generatív elméletek érvényességi területek gyakorlati eszközök tervezési elvek tervezési szabályok elemzési módszerek min!ségi értékelési módszerek THE INTERNET,mapped on the opposite page, is a scalefree network in that 10 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Tervezési elvek 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 nextprev gombjai leképezés irány gombok pozíciója utalás (a$ordance) gombok, slider

6 THE INTERNET,mapped on the opposite page, is a scalefree network in that 11 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Tervezési minták (Design patterns) 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 Design principles, frameworks Design guidelines Concrete deployed systems Pattern language Design patterns 12 THE INTERNET,mapped on the opposite page, is a scalefree network in that number of connections to other sites. This map, made on February 6, 2003, Pattern: Required Field Markers BYALBERTU\SZLOBARABASI ANDERICBONABEAU Web használhatósági tervezési minták (pl.) 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: clientside validation, serverside validation, what they see is all they get

7 THE INTERNET,mapped on the opposite page, is a scalefree network in that Web design dis.'~tj port,from BYALBERTU\SZLOBARABASI ANDERICBONABEAU THE INTERNET,mapped on the opposite page, is a scalefree network in that 14 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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! gazdasági következményekkel m"vészi vagy mérnöki megközelítés szabályok ajánlások

8 THE INTERNET,mapped on the opposite page, is a scalefree network in that 15 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Vállalatok problémái a Webbel csak egy katalógus webes projekt kezelése vállalati 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 => speciális megközelítést kíván THE INTERNET,mapped on the opposite page, is a scalefree network in that 16 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Web site használhatóság 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ó

9 THE INTERNET,mapped on the opposite page, is a scalefree network in that 17 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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 THE INTERNET,mapped on the opposite page, is a scalefree network in that 18 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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

10 THE INTERNET,mapped on the opposite page, is a scalefree network in that 19 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Information foraging 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) THE INTERNET,mapped on the opposite page, is a scalefree network in that 20 Information foraging Nyereség R 2 R 1 Határ haszon g(t w ) Nyereség függvény t B1 t B2 t 2 t 1 Foltokközötti id! Foltokközötti nyomjavítás Foltonbelüli id! BYALBERTU\SZLOBARABASI ANDERICBONABEAU Nyereség g 2 (t w ) R 2 g 1 (t w ) Foltonbelüli dúsítás R 1 Foltokközötti id! t B t 2 t 1 Foltonbelüli id!

11 THE INTERNET,mapped on the opposite page, is a scalefree network in that 21 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Info foraging (pl.) Information Foraging 16 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 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 Active Project Piles Computer Reference Area Figure 2. Schematic layout of the Business Intelligence office. Physical Workspace Desk 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 THE INTERNET,mapped on the opposite page, is a scalefree network in that 22 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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

12 THE INTERNET,mapped on the opposite page, is a scalefree network in that 23 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Info nyom (scent) 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) THE INTERNET,mapped on the opposite page, is a scalefree network in that 24 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Web használhatósági patternek 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

13 THE INTERNET,mapped on the opposite page, is a scalefree network in that 25 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Környezetpszichológia web interakciós referencia modell böngészéssel kapcsolatos tényez!k (taszk független, emocionális hatások) környezeti interakciókkal azonosak 3 fázisú interakció THE INTERNET,mapped on the opposite page, is a scalefree network in that 26 Környezetpszichológia Environmental Psychology of Web Pages (folyt.) ENVIRONMENT Complexity Coherence Spatial configuration 1. Initial encounter with Environment Aesthetics Mystery Wayfinding 2. Navigation/Information Gathering Aesthetics & Functionality BYALBERTU\SZLOBARABASI ANDERICBONABEAU Relation between purpose and overall impression 3. Decisionmakingprocess Overall Impression FUNCTIONALITY 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

14 THE INTERNET,mapped on the opposite page, is a scalefree network in that 27 BYALBERTU\SZLOBARABASI ANDERICBONABEAU THE INTERNET,mapped on the opposite page, is a scalefree network in that Információ építészet site tervezési megközelítés nagy siteok 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 tartalom kategorizálás hierarchiák kialakítása browse optimalizált szerkezet vizuális tervezés és alkalmazása a hierarchiára Információ építészet 28 BYALBERTU\SZLOBARABASI ANDERICBONABEAU

15 THE INTERNET,mapped on the opposite page, is a scalefree network in that 29 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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ó architektúrán THE INTERNET,mapped on the opposite page, is a scalefree network in that A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front and backend 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 these various elements. Információ építészet és interfész kialakítás The Elements of User Experience Web as software interface Concrete Completion Jesse James Garrett jjg@jjg.net 30 March 2000 Web as hypertext system Visual Design: graphic treatment of interface elements (the "look" in "lookandfeel") Visual Design Visual Design: visual treatment of text, graphic page elements and navigational components 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 Interface Design Navigation Design Information Design 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 Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Interaction Information Design Architecture time Information Architecture: structural design of the information space to facilitate intuitive access to content Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs ;i~e~tu"eg~ye'l"rne(;lb9.$ha redorganili User ngprincipies. Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other BYALBERTU\SZLOBARABASI internally ANDERICBONABEAU derived goals for the site taskoriented Abstract Functional Content Specifications Requirements User Needs Site Objectives Conception 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 informationoriented 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 Jesse James Garrett

16 THE INTERNET,mapped on the opposite page, is a scalefree network in that 31 Információ építészet és interfész kialakítás (pl.)!"#$%&'($)'*+"),,./'!"#$%&'()'*+,.&'/$"0&."1&2'34,41&1526'7+#&'8&,.+5&6'9'7+#&'!.4:''!!"#'0112&'34(' :' BYALBERTU\SZLOBARABASI ANDERICBONABEAU THE INTERNET,mapped on the opposite page, is a scalefree network in that "#$%&'()*! +&*,#!.+)/! %)*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(,*+! #91)4#! 1&+,:0%&1! %1&00+))/! 1%'$+0! ')! (*'+)#$%! 23)1! #(9(0()*0! ')! '3!,$(#1(*05!! ;30! 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! 01.:0'$#7! %)$+0! 2&0! %+&'#!.)+! '3! /&*7! #91)4+0!2!2+!$*&A1!')!+&%3!)*:)*:)*5!!!! B))+#(*&'()*! '))>! '3!.)+/! ).C! &D! +E$(+/*'0!,&'3+(*,! &%+)00! 4+)#$%'0! &*#! $0+! 4+).(108! AD! #91)4/*'! ).! +: $0&A1!<6!%)#8!%D!$0&A(1('7!'0'(*,!).!'3!,$(#1(*08!&*#!#D! (*#(9(#$&1! 4+)#$%'! +9(205!! FE$(+/*'0!,&'3+(*,! )%%$++#!2>178!&*#!2&0!&*!)*,)(*,!4+)%00!#0(,*#!')!! '+&%>! *##! %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! #91)4#! ')! &0!&#)4'()*!).!'3!,$(#1(*08!&*#!*3&*%!%)*0(0'*%7!).! (/41/*'&'()*5!! H! '&/! 2&0! &00(,*#! 2('3(*! I+&%1! ')! #91)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! 19108! +&*,(*,!.+)/! (*.)+/&1!+9(20!2('3!&!<6!#0(,*+!')!.)+/&1!+9(20!2('3! IA tervezési )$+!#4&+'/*'!9(%!4+0(#*'5!!!!!!! B)//$*(%&'()*! )%%$++#! A)'3! 2('3! '3! <0&A(1('7! &*#! 6*'+.&%! L0(,*! #4&+'/*'8! &*#! 2('3! '3! 4+)#$%'! '&/0! 492!! formalizmusok Volume No. 5, Issue No Oracle Portal BYALBERTU\SZLOBARABASI ANDERICBONABEAU Concept maps Wireframes Story boards Block diagrams Flow maps

17 a Flow maps 33 THE INTERNET,mapped on the opposite page, is a scalefree network in that traces the shortest routes from a test Web sinho about 100,000 others, Matt Leacock using like colors for similar Web addresses. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m a BYALBERTU\SZLO BARABASI ANDERICBONABEAU Flow maps 34 IA Visual Vocabulary Cheat Sheet Conditional Elements THE INTERNET,mapped on the opposite page, is a scalefree network in that 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) s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m Conditional Selector: Same as branch, but paths are not mutually exclusive. NOTES BYALBERTU\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 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 Created by Scott Larson (slarson@stickygoo.com). Based on work by Jesse James Garrett <

18 a 35 Wireframes THE INTERNET,mapped on the opposite page, is a scalefree network in that traces the shortest routes from a test Web sinho about 100,000 others, using like colors for similar Web addresses. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m a BYALBERTU\SZLO BARABASI ANDERICBONABEAU 36 THE INTERNET,mapped on the opposite page, is a scalefree network in that 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 s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m BYALBERTU\SZLO BARABASI ANDERICBONABEAU

19 a Speciális tranzakciós felületek 37 THE INTERNET,mapped on the opposite page, is a scalefree network in that 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. Laszlobased applications exhibit a fluidity and responsiveness that is at first startling to people accustomed to conventional transactiondriven Web sites. The responsiveness stems from the increased proportion of code that is executed clientside rather than serverside. 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 realtime 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 s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m a WITH EXTERNAL SOURCES VIA 8, AND DELIVERS THE RESULTING APPLICATION IN ANY OF TODAY S POPULAR BROWSERS BYALBERTU\SZLO BARABASI ANDERICBONABEAU 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 Plugin. 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 multideveloper teams typically rely on textdependent code search and revision control tools to build and maintain enterpriseclass IT systems. 38 THE INTERNET,mapped on the opposite page, is a scalefree network in that 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. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m BYALBERTU\SZLO BARABASI ANDERICBONABEAU,ASZLO 3YSTEMS.EXT 'ENERATION 7EB!PPLICATIONS

20 THE INTERNET,mapped on the opposite page, is a scalefree network in that 39 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Oldal tervezés (folyt.) képerny! terület kihasználása kognitív háttér (korai látórendszer) CODE theory of visual attn. popout e$ecst vizuális indexelés medialpoint representation THE INTERNET,mapped on the opposite page, is a scalefree network in that 40 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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 sávszélesség szerver sebesség

21 THE INTERNET,mapped on the opposite page, is a scalefree network in that 41 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Oldal tervezés Linkek link leírások a link szövege magyarázó szöveg link title oldalnév siterész link tulajdonság link színek reklám linkek Link? (no affordance) THE INTERNET,mapped on the opposite page, is a scalefree network in that 42 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Tartalom tervezés 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)

22 THE INTERNET,mapped on the opposite page, is a scalefree network in that 43 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Tartalom tervezés (folyt.) 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) THE INTERNET,mapped on the opposite page, is a scalefree network in that 44 Tartalom tervezés Thumbnails (lényeg kiemel! kicsinyítés) BYALBERTU\SZLOBARABASI ANDERICBONABEAU

23 a Site tervezés 45 THE INTERNET,mapped on the opposite page, is a scalefree network in that 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. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m a BYALBERTU\SZLO BARABASI ANDERICBONABEAU 46 Site tervezés (folyt.) THE INTERNET,mapped on the opposite page, is a scalefree network in that 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. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m BYALBERTU\SZLO BARABASI ANDERICBONABEAU

24 THE INTERNET,mapped on the opposite page, is a scalefree network in that 47 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Site tervezés (folyt.) 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? merre lehet menni? hogy lehet oda menni? site mapek info viz. THE INTERNET,mapped on the opposite page, is a scalefree network in that 48 BYALBERTU\SZLOBARABASI ANDERICBONABEAU Site tervezés (folyt.) hypermédia struktúrák lineáris opciók diverziók grid hierarchikus web

25 a Site tervezés (pl.) 49 THE INTERNET,mapped on the opposite page, is a scalefree network in that traces the shortest routes from a test Web sinho about 100,000 others, edu site publikálási hajlam sok kis részszervezet nem centralizált, koordinálatlan using like colors for similar Web addresses. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m a BYALBERTU\SZLO BARABASI ANDERICBONABEAU növekedés tipikus WWW struktúra kicsiben 50 Site tervezés (pl.) THE INTERNET,mapped on the opposite page, is a scalefree network in that 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: hosztok: 20 s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m Hatvány fv. eloszlású linkszám az BYALBERTU\SZLO BARABASI ANDERICBONABEAU oldalakhoz

26 a Site tervezés (pl.) 51 THE INTERNET,mapped on the opposite page, is a scalefree network in that traces the shortest routes from a test Web sinho about 100,000 others, using like colors for similar Web addresses. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t kézzel kialakított link szerkezet a m központi magban a BYALBERTU\SZLO BARABASI ANDERICBONABEAU(3 link mélység) PHP link szerkezet egy portálon (5 link mélység) 52 Kísérleti browserek THE INTERNET,mapped on the opposite page, is a scalefree network in that 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. s J;i~e~tu"eg~Ye'l"rne(;lb9.$ha red organili ng principies. t m BYALBERTU\SZLO BARABASI ANDERICBONABEAU

27 THE INTERNET,mapped on the opposite page, is a scalefree network in that 53 Kísérleti browserek (folyt.) BYALBERTU\SZLOBARABASI ANDERICBONABEAU Hyperbolic tree Site map Popout Prism browser THE INTERNET,mapped on the opposite page, is a scalefree network in that 54 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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 elemzés

28 THE INTERNET,mapped on the opposite page, is a scalefree network in that 55 BYALBERTU\SZLOBARABASI ANDERICBONABEAU 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/ '3,+6%(78+9#+,5$+:'+;+<$)"=!!"#$%&' (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* "(* * )%*+,&%' 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"'*.',*&"$,.#? &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$*%'!+,+.'/01'(#$'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.$ 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,#$