Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Felhasználói élmény kialakítása
A webfejlesztési folyamat(Jesse James Garrett: The elements of user experience)
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Webfejlesztési folyamat
•Követelmények speciális szerepe
•felhasználói élmény ~ használhatóság
•kognitív követelmények
•cognitive informatics
•kogníció-intenzív alkalmazási területek
•“fogyasztói” alkalmazások
2
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Követelmény meghatározás
•Rendszerek elemzési szempontjai
•különböz! perspektívák
3
System
Observer
Function (focus)
Collaborating objects (background)
System
Observer
Function (background)
Collaborating objects
System
Observer
User
HCI néz!pont
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Kognitív követelmények
•Taszkok HCI szemlélete
•“Munka” teljesítmény
•alkalmazás-domén
•munka rendszer
•emberek (felhasználók), ágensek
•technológia
•Taszk vs. cél orientált megközelítés
4
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Versenyel!ny
•Szolgáltatás
•Információ, funkcionalitás, élmény
•“Ügyfelek” megnyerése és megtartása
•Üzleti szempont
•megtérülés (ROI)
•mérés?
•conversion rate
5
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Felhasználói élmény kialakítása
•5 absztrakciós szint, “elemek” (Garrett elements)
•koncepcionális keret
•rétegzett rendszer
•de “tovább-gy"r"zési” e#ektus
•tervezési szintek id!beli átlapolódása
6
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Az elemek
•Felhasználói élményt meghatározó tervezési döntési szintek
•Stratégia szint
•M"ködési kör szint
•Struktúra szint
•Váz szint
•Felszín szint
7
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Tovaterjed! hatás8
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Projekt lefutás9
Id!
terv
ezési te
vékenység
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Web felhasználás
•Felhasználás (alkalmazási kör) megváltozása
•igények és technológiák változása
•statikus hipertext -> dinamikus, adatbázis hajtott
•alapvet! kett!sség
•hipertext vs. szoftver interfész (információ vs. taszk)
•hibrid rendszerek
10
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Kett!sség és elemek11
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
Abstracttim
eConception
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/
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Az elemek használata
•élmény ill. használhatósági problémák nem köthet!k egy szinthez
•meghatározó tényez!k
•tartalom (content is the king)
•technológiák
12
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Szájt szofisztikáltsága13
Információ
Egyirányú interakció
Kétirányú interakció
Tranzakciók
Perszonalizáció
Id!
Szofisztikáltság foka
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Stratégia szint
•Szájt célja
•Üzleti célok
•pénz szerzés, megtakarítás
•Branding
•Metrikák
•pagehit
•regisztrált felhasználók száma
•Felhasználók szegmentálása
14
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
M"ködési kör szint
•Követelmények dokumentálása (konkretizálás)
•mérföldkövek definiálása
•funkciók kapcsolata
•prioritálás
•Funkciók és tartalom
•tartalom -> funkcionális követelmények (CMS)
•content repository
15
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Statégiai célok és követelmények16
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Mérföldkövek17
Version
1.0
Version
1.1
Now Milestone 1 Milestone 2
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Követelmények specifikálása
•Pozitív megközelítés
•Mit tud csinálni a felhasználó?
•Specifikusság
•Pontosan hogyan tudja ezt csinálni?
•Objektív fogalmazás
•Hogyan ellen!rizhet! a követelmény teljesítése?
18
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Struktúra szint
•Interakció tervezés
•taszk
•koncepcionális model, metaforák, konvenciók
•felhasználói “hibák” kezelése
•megel!zés
•javítás
•visszaállítás
19
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Struktúra szint (folyt.)
•Információ építészet
•top-down megközelítés
•bottom-up megközelítés
•adaptáció biztosítása
•tartalom elrendezési (hipertext) struktúrák
•nomenklatúra rögzítése - szótár
•meta adatok meghatározása
•architektúra diagramok
20
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Váz szint
• Interfész tervezés
• konvenciók betartása
• standard interfész elemek
• interfész technológiák
• html, JavaScript, Flash,...
• Navigáció tervezés
• globális navigáció
• lokális navigáció
• kiegészít!
• kontextuális navigáció
• kényelmi navigáció
21
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Felszín szint
•Vizuális tervezés
•esztétika
•arculat megjelenítés
•oldal elrendezés
•kontraszt
•egységesség
•konzisztencia
•színsémák, tipográfia (style guide)
22
THEINTERNET,mapped on the opposite page, is a scale-free network in that
some siteS (starbursts and detail above) have a seemingly unlimitednumber of connections to other sites. This map, made on February 6, 2003,
traces the shortest routes from atest WebsinHo about 100,000 others,
using like colors for similar Webaddresses.
a -
Scientistshaverecentlydiscoveredthat variouscomplexsystemshave
antlnderlyihg~..'~tJ;i~e~tu"eg~Ye'l"rne(;lb9.$haredorganili ngprincipies.
Thisinsighthas important impli~ationsfor a hostof
applications,fromdrugdevelopmentto Internetsecurity
BYALBERT-U\SZLOBARABASIANDERICBONABEAU
50 SCIENTIFIC AMERICAN MAY 2003
Webtechnológia 1
Gyakorlati kérdések
•Tudatos tervezés
•problémák megértése
•a megoldás következményeinek megértése
•Tervezési gyakorlat (hibás)
•design by default
•design by mimicry
•design by fiat
23