Design of web sites Day 2

HiO Design of web sites Day 2 Jørgen Dalen, Bouvet Kan jeg stole på det?
Passer det mitt image?
Er det bra for miljøet?
Hva vil naboen si?
Virker det?
Hva kan jeg bruke det til?
Forstår jeg hvordan det fungerer?
Ser det farlig ut?
Ser det bra ut?
Lukter det godt?
Er det bra å ta på?
The users: three basic ques?ons Who are they? What do they want? How can we help them achieve their goals? The customer journey Guess with the help of personas Agenda Day 1 Methodology, overview Goals and target groups Needs assessment: personas and customer journeys Day 2 User experience concept Content and func?onality Informa?on structure Day 3 Informa?on structure, cont. Mul?-­‐channel designs Naviga?on Interac?on design Ac?vi?es in a project Strategy
Goals
Target groups
Needs
assessment
UX concept
Content and
functionality
Information
structure
Navigation
Interaction
design
Graphical
design
Halogen blog hNp://kjokkenfesten.no Internet: Good is not enough Fantastic
Really good
Lawsuit
Horrible
Bad
OK
Good
Walk the extra mile User centered design Icing on the cake Close Cigar Balancing the needs of the users and the company (example: web shop) The company Get rid of products they have too many of Sell more products Get as much info from the users as possible The user Find the specific product fast Give away as liNle info as possible Pay as liNle as possible Simple model for describing a ux concept Func?on How was the performance? User experience Communica?on How was the descrip?on of the performance etc Interac?on Was it a long queue? Was it easy finding the seats? Eksempel på konsept for brukeropplevelse Sømløs kundeopplevelse Vennlig kommunikasjon Fullservice-­‐kanal Kundereisen Vi skal orkestrere kundeopplevelsen. Vær vennlig før du spør om behov, kjenn behovet før du ?lbyr tjeneste! Concept: The town square Tone-of-voice
Associations
Content examples
User interaction
Enkelt, folkelig,
muntlig
Variasjon
Gammel mann på
benken som
forteller historier
Opplevelsesbasert
interaksjon
Spennende tilbud
Byttehandel
Uformelt
Knytte kontakter
Sladder
klikkdannelse
Spåkone i
campingvogn som
forteller om
fremtiden
Smaksprøver
Taler
Blanding av nytte
og underholdning
Frivillig
brukergenerert
innhold
Multibrukerinteraksjon
Concept 3: Telenor Forum Concept 1: Telenor Academy Learning center
Playing field
Hall of Fame
Concept 2: Campus Telenor Play
Learn
Comm. Play
Learn
Comm. Play
Learn
Comm. User experience concept ?ps The ux concept must support the overall effect goal of the solu?on Use any technique you are comfortable with describing the user experience concept Agenda Day 1 Methodology, overview Goals and target groups Needs assessment Day 2 User experience concept Content and funcConality Informa?on structure Day 3 Informa?on structure, cont. Naviga?on Interac?on design How to write func?onal requirements User story (example: HiO web site) As a student, I would like to be able to compare the different courses, to be able to make the right choice With user stories, you link the func?onality to the target groups and the goals Increase the number of highly qualified j ob seekers Priori?ze the target groups Priori?ze the needs of the target groups Map content and fun?onality to the needs Elements of a successful project Define your target groups Define a goal for each target group Know the needs of the target groups Create the content that fulfils the needs Define an owner of all the content Have an organisa?on that supports the content owners Goal 1 Target-­‐
group 1 Need 1 Goal 2 Target-­‐
group 2 Goal n Target-­‐
group n Content element 1 Content owner 1 Need 2 Content element 2 Cotnent owner 2 Need n Content element n Content owner n Support from the organisa?on Agenda Day 1 Methodology, overview Goals and target groups Needs assessment Day 2 User experience concept Content and func?onality InformaCon structure Day 3 Informa?on structure, cont. Naviga?on Interac?on design Key ques?ons How do you work with informa?on structure in projects? What kinds of structures do you need? How much structure do you need? What is the most important quality of a structure – Usefulness? Consistency? Completeness? What is informa?on architecture? Organizing the content Organizing content – by usage Organizing content – by category Organizing content – descrip?ve Organizing content – by target group Silja Donald
Ole
Hanne Dole
Joakim Thomas Doffen
40 Informa?on architecture: the dilemma ”I think all the content should be categorized by our target groups” ”It be nice if all the budgets were in the same folder” ”The best would be to collect all the documents from each department in one place” ”I prefer to have a personal folder” Informa?on architecture: the dilemma 100 % 75 % 50% 51% 35% 6% 3% Status Kilde Format Person 3% Lokasjon 3% DokumenNype Tema 25% Informa?on architecture: different perspec?ves The communica?on people The knowledge workers The archive people One-­‐ to many communica?on •  Peer to peer communica?on •  Don’t mess with my structure Quality assured informa?on •  Effec?ve collabora?on •  Everything should be archived •  Informal communica?on •  Knowledge long shelf life •  Focus on current project •  Knowledge short shelf life The informa?on model: purpose Site 3
Human resources
Site 1
Recruiting
Collaboration
Site 15
Site 2
Site 100
Site 100
Site 1 Blog 1
Site 46
Site 1000
Site 2
Site 300
Site 6
Site 50
Site 1
Site 100
Site 100
Site 1
Site 1
Site 345
Blog 3
Blog 2
Site 1
Site 4
Site 7
Site n
Site 100
Site 1
Site 1
Site 100Site 200
Site 100
Two ways of working with informa?on architecture Top-­‐down •  The mental model of the users •  Defined by the card sor?ng •  Based on the most important needs of the users •  ...and principles, like mutual exclusive cateagories BoMom-­‐up •  more “formal” proper?es of content •  more based on analysis than needs assessment •  Important because no user has overview of all the content Kilde: Adap?ve Path Kortsortering: brukerens “mentale modell” “Mental Modell” gis av
kortsorteringen
Kilde: Adap?ve Path Detaljstruktur gis av
innholdskartleggingen
Toppnavigasjon For å rendyrke kjernevirksomheten bil, verksted og ?lbehør, fokuserer hovedmenyen på neNstedet kun på deNe. Sulland.no
Vedlikehold og
Bil
Biltilbehør
Kundeservice
reparasjon
Innhold som dreier seg om Sulland Gruppen, drip og administrasjon er lagt i en egen global meny som er mindre fremtredende. Selskapsadm.meny
Jobb
Presse
Om Sulland
Gruppen
Søk
Bil Bil
Finn bil/søk
Presentasjon av
nye biler
Presentasjon av
brukte biler
Tester
Import av bil
Om innbytte av
bil
Kundefordeler
Om
skadeserviceavtalen,
NAF-medlemsskap,
gunstige forsikringer,
osv.
Finansiering
Om
finansieringsproduktene
som tilbys
Finansieringskalkulator
Forsikring
Om
forsikringsproduktene
som tilbys
Bilhus
Presentasjon av
bilhus
Finn ditt lokale
bilhus/verksted
Området omfaNer bilene Sulland Gruppen ?lbyr, samt støNeinnhold som informerer om muligheten for innbyNe og import av bruktbil, finansiering, forsikring og bu?kkene. Hver bil vil være merket med egenskaper som gjør det mulig å finne/søke på bil fra ulike innfallsvinkler. DeNe blir tegnet ut i interaksjonsdesignet. Mål: OppreNe dialog med potensiell kunde, forenkle beslutningsprosessen rundt anskaffelse av bil og få kunde ?l bu?kk. Information architecture – ways of categorizing •  ”Objec?ve” –  Chronological –  Geographical –  Alphabe?cal •  ”Subjec?ve” –  Topic (sports, poli?cs) –  Task (review, edit, save) –  Target group (students, teachers) –  Metaphorical (campus) Chronological Geographical Alphabetical By topic By target group By task By metaphor Hierarchical Linear Relational Hybrid Special cases…. A special case: site structure Ac?vi?es in a project Strategy
Goals
Target groups
Needs
assessment
Content and
functionality
Information
structure
Navigation
Interaction
design
Graphical
design
Agenda Day 1 Methodology, overview Goals and target groups Needs assessment Day 2 Concept Content and func?onality Informa?on structure Day 3 Informa?on structure, cont. Naviga?on Interac?on design