w eb-haszn lhat s g (w ebdesign)heckenas/okt/webf3.pdf · w ebsz jtok haszn lhat s ga mi rt fontos?...

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

Upload: others

Post on 23-May-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Web-fejlesztésNGM_IN002_1

Web-használhatóság(Webdesign)

Page 2: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

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 9241-11 (1998)A használhatóság értékelése

social andorganizational

environment

physical environment

technical environment

productuser

task goals

satisfaction performance

inter-action

Context

Quality of use measures

Webszájt funkcionalitás

Információs szájttényekmegtalálási id! csökkentése (info foraging)

Promóciós szájtszórakoztatás, marketingélményteremtés, tartózkodási id! maximálása

Webalkalmazástranzakciók, munkafolyamatokbackend feldolgozás

Információs Promóciós

Tranzakciós

Page 3: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Webszájtok használhatóságaMiért fontos?

a felhasználó rögtön szembesül a használhatósággaloldalak milliói állhatnak rendelkezésrea használhatóság könnyen mérhet! gazdasági következményekkel

A valóságmérések szerint a felh. 66% jár sikerrelegy taszk elvégzésére átl. 3,2 szájtátlag 1"49” egy szájtonhosszú nyitóoldal végére a látogatók 23% jut el

Web felhasználókInternet kapcsolat sávszélességeBöngész!Felhasználók céljai

szerver logokkeres! logokvisszacsatolás, bug reportonline kérd!ívek

Visszatérési hajlandóságadott taszk esetén 12% visszatérési esély

!"#$%&%!"'$()* "'+* &"$,-.#%/,+* $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.#,* "#,"(* .8* "* (%$,2* >%$0* >,5D6%7$)*

&6#%.(%$?* &.67+* ,"(%7?* 5,* %'$,#!#,$,+* "(* &.'86(%.'2*

>,5D6%7$* &"'*'.$* ,"(%7?* &"!$6#,* "'?* %'$,#"&$%.'(*4%$0* $0,*

+,=%&,* $0"$* +.* '.$* &"6(,* &.116'%&"$%.'* 4%$0* $0,* (,#=,#)*

$06(* "&$%.'(* (6&0* "(* &7%&9(* .'* '.'A7%'9(* .#* &7%&9(* .'* $0,*

(&#,,'*5,8.#,* $0,*&.'$,'$* %(* 8677?* 7."+,+*"#,*'.$* #,&.#+,+2*

N$0,#* !#.57,1(* .&&6#* 40,'* !"#$%&%!"'$(* 1%(%'$,#!#,$* $0,*

"&$6"7* $"(9(* "'+* E6,($%.'(* "(9,+2* F.#* :;<()* "'* "++,+*

+%88%&67$?*%(*-"$0,#%'-*$,C$*%'!6$*8#.1*$0,*6(,#2**

*

!"#$%&' (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*

)%*+,&%' -&."/&'

• M'$,#"&$*5,8.#,*7."+*RST**

• P.*8.#4"#+*56$$.'*RUT*

• ;%88%&67$?* 4%$0* %'!6$* %'*

E6,($%.''"%#,*RST**

• -"00"/$123',/%*11"4#*RUT*

• ;,=%&,* ,##.#(* 6'#,7"$,+* $.*

$,($%'-*R@T**

• 3#%,+*4#%$%'-*.'*(&#,,'*RVT*

5"2&'-&,"#4' 6&,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*

• !71,&13'/*891&2&:'27,;*RWT*

• -"00"/$123' %&8&8?&%"4#'

27,;':&,/%"92"*4*RST**

• ;%88%&67$?* 4%$0* %'!6$* %'*

E6,($%.''"%#,*RST**

• D6,($%.''"%#,* 4.#+%'-*

!#.57,1(*RST**

• F.#-.$*0.4*$.*,'+*$"(9*R@T**

• X.'86(%'-* $"(9* +,(&#%!$%.'*

R@T*

67?1&'(O*G"&0*&,77* %'* $0%(* $"57,* %(*"'* %((6,*&"$,-.#?2*G"&0*%((6,* %(*7%($,+)* "7.'-* 4%$0* %$(* (,=,#%$?* %'* !"#,'$0,(%()* 4%$0* $0.(,* %'* 5.7+*

%'+%&"$%'-* %((6,(* 8.6'+* %'* $0,* #,1.$,* 6("5%7%$?* $,($(2* K.1,* %((6,(*

"!!,"#*%'*1.#,*$0"'*.',*&"$,-.#?2*

!+,+-.'/0-1'(#$'20#2)+&"0#&'

>,* !7"'* $.* ,C$,'+* .6#* 6(,#* ($6+%,(* $.*><:* !0.',(* "'+*

.$0,#* 1.5%7,* +,=%&,(2* >,* "#,* "7(.* %'=,($%-"$%'-* 5,$$,#*

#,1.$,* #,&.#+%'-* 1,$0.+(* 8.#* E6"7%$"$%=,* +"$")* %'&76+%'-*

"6+%.2*>,* !7"'* .'* %'&76+%'-* !#.8,((%.'"7* 4,5* +,(%-',#()*

$,($%'-* 1.#,* (%$,(* 6'+,#* +,(%-')* "'+* !,#8.#1%'-* 1.#,*

#%-.#.6(*,C!,#%1,'$"7*+,(%-'(*%'*86$6#,*,="76"$%.'(2*

34.*1"%'*&.'&76(%.'(*&"'*5,*+#"4'*0,#,2*30,*8%#($*%(*$0"$*

&7%&9($#,"1(*"'+* #,1.$,* $,($%'-* (,,1* $.*5,*!#,$$?*-..+*"$*

8%'+%'-*6("5%7%$?*%((6,(*#,7"$,+*$.*$0,*!"#$%&'("'(*+%(!7"?,+*

.'*1.5%7,*+,=%&,(2*J.4,=,#)*$0,*(,&.'+*&.'&76(%.'*%(*$0"$*

$0%(*1,$0.+.7.-?* %(* "*!..#* (65($%$6$,* 8.#* 8%'+%'-*6("5%7%$?*

%((6,(*4%$0* $0,*)"*+%"* %$(,782*Y'+,#($"'+%'-* 0.4* $.* 5,$$,#*

+,(%-'*8.#*1.5%7,*+,=%&,(*#,E6%#,(*9'.47,+-,*.8*5.$0*$0,(,*

"(!,&$(O*&.'$,'$*+,(%-'*"'+*+,=%&,*+,(%-'2*>,*0"=,*(0.4'*

!#.1%(%'-* 1,$0.+(* 8.#* -"$0,#%'-* -..+* &.'$,'$A#,7"$,+*

6("5%7%$?* %'8.#1"$%.'* #,1.$,7?)*"'+*"#,* %'=,($%-"$%'-*4"?(*

$.*%1!#.=,*"'+*,'0"'&,*$0,(,*1,$0.+(2*

-.!.-.#2.&'

@2*,+-"."//$01&'"$2/3#+.+(4$5"/"3-%12*UVV@)*Y("57,*:#.+6&$(*

X.1!"'?O*P,4*Z.#9*X%$?2*!2*UAS2**

U2*L#"%'"#+)*[2*"'+*L2L,&9,#2*63/"$7(8)49$:;6&<<"-%"$

6.+%=/(-"3<$>+/83.+?3(+&'2*M'*@:::$0-&%"")+'A/$&B$@'B&-<3(+&'$

>+/83.+?3(+&'2*UVV@2*K"'*;%,-.)*X<2**

S2*J.'-)*[2M2)*,$*"72)*,"#C8+.(9$D$0-&E4;#3/")$DFF-&3%1$(&$

5"<&("$,"#$2/3#+.+(4$G"/(+'AH*3.*"!!,"#*%'*<X\*3#"'("&$%.'(*

.'*M'8.#1"$%.'*K?($,1()*UVV@2**

W2*P%,7(,')*[2*I&#+."$J"*+%"/$,+..$7&&'$K"$2/"B8.2*

0$$!O]]44426(,%$2&.1]"7,#$5.C]UVV@V^@_20$172*UVV@2*

!"##$%&'(")*+!"##$)',%*+-)%+.+/01/2+%&3"(+/00/+++++++++++++++++++++++++++++++++++++++45'3,+6%(78+9#+,5$+:'+;+<$)"=#"#=+>+?@%(-%,"#=+A'B"($+<$@"C$)+

+ +++

!

797

Page 4: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Információ fogyasztás (Information foraging)

információ gy#jtés ökológiai modelljemagas szint# webes interakció modell

információ költség szerkezeteinformá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ásaNyereség

Folton-belüli id!Foltok-közötti id!

Nyereség

Folton-belüli id!Foltok-közötti id!

Folton-belüli dúsítás

Foltok-közötti nyomjavítás

Nyereség függvény

tB1 tB2 t1t2

R1

R2

g(tw)

tB t2 t1

Határ haszonR1

R2g1(tw)

g2(tw)

Page 5: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Info fogyasztás a Webenfogyasztók (felhasználók)

releváns oldalak találati rátájainformáció források (szerverek)

oldalak attraktívitásamagas info tartalmú foltok rendezetlen halmazaszerver oldali megoldások

indexelt tartalom (Lycos)tematikus listák (Yahoo)link gy#jtemények

kliens oldalhierarchikus könyvjelz!k

Info nyom (scent)

utalások az információ min!ségére a nyom követéséhezweb navigáció:

proximális nyom - disztális infokeres! gépek (between patch)

link kontextuslink követés (in patch)

link által hordozott utalásokcél környezet

URLtávolság (link szám)

Page 6: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Web használhatóságiminták tervezési minták

tervezési szótárazonosított invariáns értékek

médiumhoz kötött patterneksaját szociális dinamika

felhasználói felület patternekformokláthatósági elv

rendszer patternekkliens - szerver funkciók szétválasztásasá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

Page 7: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Információ építészet(IA)

Információ építészet

Szájttervezési megközelítésInformá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ágnavigálhatóságredundancia, hiányzó adatok, elavultságlook and feel elveszik az alsóbb szintekenhozzáférés szabályozás megoldása

Page 8: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Info építészeti megközelítések

The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.

Jesse James [email protected]

Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")

Information Architecture: structural designof the information space to facilitateintuitive access to content

Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality

Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

Content Requirements: definition ofcontent elements required in the sitein order to meet user needs

Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design: visual treatment of text,graphic page elements and navigationalcomponents

Concrete

Abstract

time

Conception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site

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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.

task-oriented information-oriented

30 March 2000

© 2000 Jesse James Garrett http://www.jjg.net/ia/

Tartalom orientált vs. tranzakciós alkalmazás

tartalom <-> beviteli #rlapokinformációk <-> taszkoklinkek <-> akció gomboktovábbi eltérések

keresésablak címekkeretekscrollozásbrowser kompatibilitás

Példa

Page 9: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Tartalom-elrendezési sémákTartalom 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ókdiverziók

gridhierarchikuspoliarchikusweb

Példa

Page 10: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Szájtszerkezet kialakításaSzé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

26 CHAPTER 4. INFORMATION ARCHITECTURE

Figure 4.8: A card sorting test. The concept cards are first scattered randomly over the table.

• User names the groups of piles using (different coloured) Post-its.

• If a single pile contains many (>10–12) cards, ask the user to spilt it into subgroups.

• Thinking aloud the whole time (test facilitator should prompt) and recorded on video.

• About 30–40 minutes per user.

• Capture the contents of each pile and group on paper (this user’s two-level hierarchical structure).

• Repeat with 3 to 5 users.

Manual Analysis of Card Sorting Results

• Analyse data by ”eyeballing” (looking through and compiling a final aggregate hierarchy from theindividual users’ suggestions).

• Discover each user’s mental model of information space.

• Come up with aggregate suggestion for two-level hierarchy of information, the way users wouldexpect to find things organised.

• Also come up with suggestions for naming the groups (menus), but treat these only as suggestions,which should then be usability tested.

• Translate this into equivalent web site structure.

• Repeat card sorting at higher or lower levels of granularity.

NavigációOldal típusokNavigációs oldalak

homepagelandingpagegallerysearch result

Tartalom oldalaktermék oldalak

Funkcionális oldalaksearch formsubmission form

Példa

Példa

Példa

Példa

Page 11: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Navigáció típusok

Struktúrálismain, local

Asszociatívkontextuális, adaptív, quick links, footer

Segéd navigációszájton kívülretoolbox, linkelt logo, nyelvválasztó, oldalon belüli nav.

Példa

Navigációs mechanizmusok

Navigációs modellekLapozás, lépkedésTartalomjegyzékVízszintes navigációs sáv

“kenyérmorzsa” csíkFülekMenü oszlopokKinyitható/összecsukható fákSzájton belüli keresésKibontakozó felhasználói utak

URL tippeléscímkézés

Példa

Példa

Page 12: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Oldal tervezésFigyelem vezetése a vizuális elemek segítségévelOldal szint# terv

Fontossági kategóriákEls!dlegesen fontos elemek

max. 3-4 dbMá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 representationGestalt effektusok

közelség, zártság, folytonosság, hasonlóság

Oldal tervezés (folyt.)

Steve Krug

Page 13: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Oldal elemek1. 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ókFelhasználói várakozások

eredményes használatot kevéssé befolyásoljaSzituáció függ! elrendezésekNavigáció <-> tartalom aránya

funkció függ! asszimetriaSzájtra kiterjed! oldal sablonok használata

szájton belüli el!rehaladás megjelenítéseVizuális hierarchiák használata Példa

Page 14: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Info építészeti formalizmusok

Concept maps

Wireframes

Story boards

Block diagrams

Flow maps

Példa

Példa Példa

Használhatósági teszt

Page 15: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Vissza

NeptunEl!zmények vagy mégsem

Nem...

Vagy mégis...

Helybenjárás

Vissza

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)

Page 16: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Vissza

Homepage

Vissza

Landingpage

Page 17: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Vissza

Galéria

Vissza

Funkcionális oldal

Page 18: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Vissza

Navigáció típusokmain toolbox

quicklinks contextual local

adaptive

Vissza

Helytelen navigációs megoldásTö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

Page 19: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Vissza

Info vizualizálás navigációra

IBM Glass Engine

Vissza

Vizuális hierarchia

Page 20: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Vissza

Wireframe

Vissza

Flowmap (Leacock)

Page 21: W eb-haszn lhat s g (W ebdesign)heckenas/okt/webf3.pdf · W ebsz 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

Vissza

Flowmap (Garrett)

Decision Point:

User action may generate one

of a number of results for a

given path.

IA Visual VocabularyCheat Sheet

Conditional Elements

Concurrent Set:

User action generates multiple,

simultaneous results.Web page

Installinstructions

Filedown-load

Conditional Branch:

Same as decision point, but

system decides result previous

to user action (a single path is

presented to user).

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.

Conditional Area:

One or more conditions applies

to a group of pages. These

areas are associated with a

result generated if conditions not

fulfilled.

Conditional Connector:

System may or may not provide

path to user (based on pre-

existing conditions)

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).

Web page

For members

For newusers

Searchresults

Result 2

Result 1

Web page

For members

For newusers 1

For newusers 2

Login

Error page

Memberpage

Web page Web page

JavaScript required

Error page

Web page

Web page

Web page

Created by Scott Larson ([email protected]). Based on work by Jesse James Garrett <http://www.jjg.net/ia/visvocab/>

home

archive index

archive bymonth

edit userprefs

new prefsconfirmed

reviseprefs

(1a)

post newtopic

preview post

search

results

logout(1f)

metafilter.compage 1

NOTES(1a) If user is logged in, return edit user prefs. If user isnot logged in, return login.(1b) If user is logged in, return post new topic. If user isnot logged in, return login.(1c) Display links to topics posted in the last n days, wheren 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:aboutchangelogmetatalk

continue to:thread

Jesse James Garretthttp://www.jjg.net/ia/visvocab/

(1b)

loginnew user

customize post topic

(1c) (1d) (1e)

login/register