Web-fejlesztés NGM_IN002_1

Átírás

1 Web-fejlesztés NGM_IN002_1 Web-használhatóság (Webdesign)

2 Szoftverek használhatósága The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. ISO (1998) A használhatóság értékelése task goals user satisfaction physical environment interaction social and organizational environment technical environment product performance Context Quality of use measures Webszájt funkcionalitás Információs szájt tények megtalálási id! csökkentése (info foraging) Promóciós szájt szórakoztatás, marketing élményteremtés, tartózkodási id! maximálása Webalkalmazás Információs tranzakciók, munkafolyamatok backend feldolgozás Promóciós Tranzakciós

3 Webszájtok használhatósága Miért fontos? a felhasználó 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 A valóság mérések szerint a felh. 66% jár sikerrel egy taszk elvégzésére átl. 3,2 szájt átlag 1"49 egy szájton hosszú nyitóoldal végére a látogatók 23% jut el Web felhasználók Internet kapcsolat sávszélessége Böngész! Felhasználók céljai szerver logok keres! logok visszacsatolás, bug report online kérd!ívek térési hajlandóság adott taszk esetén 12% visszatérési esély *

4 Információ fogyasztás (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 (link-követés, böngészés) információban szegény területek keresés (keres!gépek) információ nyom (szag) Info fogyasztás javítása 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 Foltok-közötti id! Foltok-közötti nyomjavítás Folton-belüli id! Nyereség g 2 (t w ) R 2 g 1 (t w ) Folton-belüli dúsítás R 1 Foltok-közötti id! t B t 2 t 1 Folton-belüli id!

5 Info fogyasztás a Weben fogyasztók (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 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 hordozott utalások cél környezet URL távolság (link szám)

6 Web használhatósági minták tervezési minták tervezési szótár azonosított invariáns értékek médiumhoz kötött patternek saját szociális dinamika felhasználói felület patternek formok láthatósági elv rendszer patternek kliens - szerver funkciók szétválasztása sávszélesség meggondolások Web használhatósági tervezési minta (pl.) 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, server-side validation, what they see is all they get

7 Információ építészet (IA) Információ építészet Szájttervezési megközelítés Információs terek struktúrájának kialakítása a tartalom elérésének, felhasználásának el!segítésére nagy szájtok 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

8 Info építészeti megközelítések Web as software interface Concrete Completion Web as hypertext system Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") 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 Functional Content Specifications Requirements 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 task-oriented Abstract User Needs Site Objectives Conception 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 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 Jesse James Garrett Tartalom orientált vs. tranzakciós alkalmazás 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

9 Tartalom-elrendezési sémák Tartalom elemek Homogén, azonos granularitási szint és jellemz!k Heterogén, különböz! típusú elemek Sémák Egzakt elrendezési sémák alfabetikus, kronológikus, földrajzi Nem egyértelm# elrendezések Téma szerint Taszk szerint Közönség szerint Metafora szerint Hipermédia navigációs elrendezések all-in-one (1 page) lineáris opciók diverziók grid hierarchikus poliarchikus web

10 Szájtszerkezet kialakítása Szélesség vs. mélység Top-down létrehozás Bottom-up létrehozás Hierarchia kialakítása pl. kártya rendezéssel Site-wide vocabularies Navigáció Oldal típusok Navigációs oldalak homepage landingpage gallery search result Tartalom oldalak termék oldalak Funkcionális oldalak search form submission form

11 Navigáció típusok Struktúrális main, local Asszociatív kontextuális, adaptív, quick links, footer Segéd navigáció szájton kívülre toolbox, linkelt logo, nyelvválasztó, oldalon belüli nav. Navigációs mechanizmusok Navigációs modellek Lapozás, lépkedés Tartalomjegyzék Vízszintes navigációs sáv kenyérmorzsa csík Fülek Menü oszlopok Kinyitható/összecsukható fák Szájton belüli keresés Kibontakozó felhasználói utak URL tippelés címkézés

12 Oldal tervezés Figyelem vezetése a vizuális elemek segítségével Oldal szint# terv Fontossági kategóriák Els!dlegesen fontos elemek max. 3-4 db Másodlagosan fontos elemek Képerny! terület kihasználása - kognitív háttér (korai látórendszer) pop-out effect - CODE theory of visual attn. vizuális indexelés - medial-point representation Gestalt effektusok közelség, zártság, folytonosság, hasonlóság Oldal tervezés (folyt.) Steve Krug

13 Oldal elemek 1. Oldalcím 2. Site cím, logó 3. Oldal tartalmi összefoglalás 4. Navigáció 5. Oldal tartalom 6. Egyéb tartalom 7. Lábléc navigáció Oldal elrendezés Konvenciók Felhasználói várakozások eredményes használatot kevéssé befolyásolja Szituáció függ! elrendezések Navigáció <-> tartalom aránya funkció függ! asszimetria Szájtra kiterjed! oldal sablonok használata szájton belüli el!rehaladás megjelenítése Vizuális hierarchiák használata

14 Info építészeti formalizmusok Concept maps Wireframes Story boards Block diagrams Flow maps Használhatósági teszt

15 Neptun El!zmények vagy mégsem Nem... Vagy mégis... Helybenjárás Szájt szerkezetek kézzel kialakított szerkezet a központi magban (3 link mélység) szerkezet egy PHP portálon (5 link mélység)

16 Homepage Landingpage

17 Galéria Funkcionális oldal

18 Navigáció típusok adaptive main toolbox quicklinks contextual local Helytelen navigációs megoldás Többszintes, desktop menü tartalom navigálásra nem hiperszöveg kompatibilis Láthatósági elv megsértése Menü metafora megsértése =>gyenge info nyom

19 Info vizualizálás navigációra IBM Glass Engine Vizuális hierarchia

20 Wireframe Flowmap (Leacock)

21 Flowmap (Garrett) metafilter.com page 1 logout (1f) Conditional Connector: System may or may not provide path to user (based on preexisting conditions) Web page Web page Web page customize login new user post topic home Conditional Area: One or more conditions applies to a group of pages. These areas are associated with a result generated if conditions not fulfilled. JavaScript required Web page Web page Error page (1a) (1b) search archive index continue to: about changelog metatalk Decision Point: User action may generate one of a number of results for a given path. Login Error page Member page edit user prefs revise prefs login/register post new topic results archive by month Concurrent Set: User action generates multiple, simultaneous results. Web page File download Install instructions new prefs confirmed preview post (1c) (1d) (1e) Conditional Branch: Same as decision point, but system decides result previous to user action (a single path is presented to user). Web page For members For new users NOTES (1a) If user 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. continue to: thread Jesse James Garrett Conditional Selector: Same as branch, but paths are not mutually exclusive. Cluster: System allows more than one path for certain conditions. Appears downstream from conditional. Search results Web page Result 1 Result 2 For members For new users 1 For new users 2