View
216
Download
0
Category
Preview:
Citation preview
grafisk formlära för(användargränssnitt)
Innehåll: spets/fördjupningMålgrupp: vem/vilka • segmentering, användarundersökningar • insikter (och avsikter)• personas • (sub-)kulturmarkörer
Element: vad
Principer: hur
Situation och syfte: varför
Innehåll: spets/fördjupningMentala modeller, referensramar att diskutera• Jfr. användbarhetsbegrepp? • Konst- och formgivningstraditioner? • Marknadskommunikation? • Media?
Schemata: tankemönster• ”Mental framework”, referensramar • Personliga/individuella • Kulturella • Politiska/ideologiska • TidsbundnaTankefigurer• Igenkännbara modeller, gestalterMemer: minnets byggstenar• Igenkänning• Replikation• Gruppering
Perception och kognition
Funktion• Synlighet, visuell prioritering,
ordning m.m. • Tydlig struktur underlättar
avläsning och gynnar avkodning
Kommunikation: tecken, koder och kultur • In- och avkodning, gynnad och
dominant tolkning m.m. • Referenser/tolkningsnycklar
underlättar avläsning • Känslor (t.ex. estetisk
upplevelse) underlättar mottagande och respons
Meningsfull diskurs
Inkodning Betydelsestrukturer 1
Kunskapsramar
Kulturkontext
Mediakontext
Tekniska förutsättningar
Avkodning Betydelsestrukturer 2
Kunskapsramar
Kulturkontext
Mediakontext
Tekniska förutsättningar
Dom
inan
t tol
knin
gDo
min
ant t
olkn
ing
BudskapsformgivningInnehåll
>Budskap
>Budskapsbärare
>Paketering
>Leveransmekanismer ‣Medium ‣ Kanal
>Respons
‣ Fragmentering‣ Spridning ‣ Bearbetning ‣ Diskussion
Innehåll och form”Content is king”
Content marketing • Formge för verkligheten ‣ Strategi - taktik‣ Innehåll –> kärnform ‣ Varianter möjliga ‣ Värt att sprida ‣Möjligt att sprida ‣ Pro-aktiv design
Innebär vad?
‣ Fragmentering‣ Spridning ‣ Bearbetning ‣ Diskussion
Virtuella världen ett isberg?Innehåll
Kommunikativt koncept • Storytelling • Metafor
Visuellt koncept, verktyg • Modaliteter • Organisation av seende• Tonalitet/uttryck• Stil/manér
Sources: The Elements of User Experience by Jesse James Garrett (2000, www.jjg.net/elements), Universal Principles of Design by Lidwell et al (2003), Common User Access: Guide to User Interface Design by IBM (1991), ISO 13407 Human centred design processes for interactive systems (1999, www.iso.org), UsabilityNet (www.usabilitynet.org), www.usability.gov,
Design Council (www.designcouncil.org.uk), W3C Web Accessibility Initiative (www.w3.org/WAI), Peter Morville (www.semanticstudios.com), Magnus Revang (userexperienceproject.blogspot.com), Leisa Reichelt (www.disambiguity.com), Michael Cummings (uxdesign.com), See it Right 2006 legibility guidelines by the Royal National Institute of the Blind (RNIB, www.rnib.org.uk)
Designed by Pascal Raabe (www.paznow.com) in accordance with the RNIB Clear Print legibility guidelines and with the help and friendly support of City ID (www.cityid.co.uk).
© Pascal Raabe 2010, some rights reserved.
This work is licensed under the Creative Commons Attribution NoncommercialShare Alike 2.0 UK: England & Wales License.
tell me show me involve me
time poor time rich
INSTRUCT AND DIRECT INFORM AND GUIDE REVEAL
USER GOALSUsersí needs depend on what they are trying to achieve when they use the product. These user goals inform the information requirements that need to be addressed in order to achieve a high level of usability.
USER CAPABILITIESUsers have different requirements depending on their situation and capabilities. Catering for these needs and enabling access to the product or system for as many people as possible is the aim of inclusive design.
varying abilities eyesight, motor
high stress levelsshort of time, responsibility for children
low conÆ denceunfamiliar with system, Æ rst time user
low perception of safetyfear of discrimination, compromised data security, injury
USER INVOLVEMENTThe most successful results are achieved when the user is involved in every step of the design process either through direct feedback, user testing, observation or informed evaluation using previously gathered information.
prototype
DESIGNER USER
feedback
VISUAL DESIGNVISUAL DESIGN
INFORMATION DESIGNINFORMATION DESIGN
STRUCTURESTRUCTURE
REQUIREMENTSREQUIREMENTS
STRATEGYSTRATEGY
VISUAL DESIGNVISUAL DESIGNVISUAL DESIGN
INFORMATION DESIGNINFORMATION DESIGNINFORMATION DESIGN
STRUCTURESTRUCTURESTRUCTURE
REQUIREMENTSREQUIREMENTSREQUIREMENTS
STRATEGYSTRATEGYSTRATEGY
Designing the presentation of information to facilitate understanding
navigation, table of contents, indices, visual hierarchy
Structural design of the information space to facilitate intuitive access to content
information architecture, interaction design, wireframe, progressive disclosure
DeÆ nition of scope, user needs, content and information requirements, functional speciÆ cations
personas, accessibility, feature set, ethnographic research, differentiation, purpose
Planning out the objectives and goals of the project, specifying organisational requirements
project space, project schedule, selecting methods and techniques, brieÆn g
CONCEPTIONabstract
COMPLETIONconcrete
The visual treatment of graphic elements, the look and feel of the product
typography, colour palette, alignment, texture, tactile quality of materials
GOOD PRACTICE GUIDELINESIt is important to consider good practice guidelines relevant to the project in order to address broad user requirements and meet accessibility standards. For example RNIB legibility guidelines, W3C validation, ISO standards, British Standards or ergonomic principles.
USER REQUIREMENTSIt is vital to use all available resources to gather information about the usersí requirements. Successful projects use an average of Æ ve different sources of information. These may be focus groups, contextual or individual interviews, observation, surveys, etc.
STICKY NOTESComparing notes is a useful tool to aid decision making. Ideas are written down on individual sticky notes, weighed against one another and organised according to priority or other criteria (speed, cost, quality, desirability etc). This technique can also be used with users to get them to put their considerations in order of importance.
PROJECT SPACEA dedicated project area where research and visualisations can be organised spatially on walls provides a creative work environment where meetings can be held surrounded by stimuli. Constructing a story about the project in the space providing roughs and unpolished design invites others to comment and contribute.
RAPID VISUALISATIONVisualising ideas and concepts rapidly using pen and paper is helpful to communicate them to the team and to test ideas quickly without investing time and resources into polished design. Rough and unpolished looking sketches, wireframes and storyboards encourage constructive feedback and stimulate discussion.
PERSONAS AND SCENARIOSA persona is an archetype comprised of habits and characteristics of the target audience. Scenarios are little stories describing how typical user tasks are carried out. They help to anticipate and identify the decisions a user will have to make at each step in their experience and through each environment or system state they will encounter.
AESTHETICSVisual design impacts greatly on the usability of a product. Users prefer a beautiful look & feel over an ugly or dull one. Aesthetic designs are perceived as easier to use, whether they are or not. Good designers Æ nd a perfect combination of accessibility and aesthetics.
PROTOTYPINGPrototypes are simple, incomplete models that can be used to evaluate responses to form (looks like prototype) or aspects of build and functionality (works like prototype) of a product. They typically evolve from concept sketches or wireframes to low and high Æ delity models as they progress through the development cycle.
PROGRESSIVE DISCLOSUREManaging the information complexity or cognitive load by displaying only relevant information at any given time prevents information overload. For example through effective signposting of destinations in a wayÆ nding system or using ì read moreî links on a website.
USABILITY TESTINGEvaluating a product by testing it with representative users helps to identify usability problems by collecting quantitative data on the usersí performance (e.g. error rate) and establishing their satisfaction with the product.
METHODS AND TECHNIQUES METHODS AND TECHNIQUES
CONCEPTIONabstract
CONCEPT
DESIGN
IMPL
EMENTATION
EVALUATION
PERSONAS & SCENARIOSROLE PLAY
USER TESTINGACCESSIBILITY TESTING
FOCUS GROUPOBSERVATION
The user centred design process is an iterative cycle where every step is evaluated against the initially identiÆ ed requirements of the users and iterated until these requirements are met. Evaluation methods include:
ANALYSIS AND PLANNING LAUNCH
USER CENTRED DESIGN
Find out whatí s below the surface of a cool design
Good design is more than meets the eye. The visual part of a design ñ the look and feel ñ is only the tip of the iceberg. Beneath the surface lies the foundation of a successful design: a user centred design process. It is a development cycle which takes into consideration what users really need and makes adjustments by exploring, testing and tuning the design until these needs are satisÆ ed. The result of this is a high level of usability: the design is effective, efÆ cient, engaging and easy to learn. The process can be applied to all design
practices that have the aim to provide a good user experience. This includes web design, interface design, product design, editorial design, urban design, wayÆ nding, service design and architecture.
There are a variety of tools, techniques and methods at each stage of the process which are used to progress the design. Some of them are explained here. The productí s probability of success is greatlyincreased by understanding and using these techniques.
THE CENTRAL PREMISE OF USER CENTRED DESIGN IS THAT THE BEST DESIGNED PRODUCTS AND SERVICES RESULT FROM UNDERSTANDING THE NEEDS OF THE PEOPLE WHO WILL USE THEM.ó Design Council
Virtuella världen ett isberg?
VISUAL DESIGNVISUAL DESIGN
INFORMATION DESIGNINFORMATION DESIGN
STRUCTURESTRUCTURE
REQUIREMENTSREQUIREMENTS
STRATEGYSTRATEGY
VISUAL DESIGNVISUAL DESIGNVISUAL DESIGN
INFORMATION DESIGNINFORMATION DESIGNINFORMATION DESIGN
STRUCTURESTRUCTURESTRUCTURE
REQUIREMENTSREQUIREMENTSREQUIREMENTS
STRATEGYSTRATEGYSTRATEGY
Designing the presentation of information to facilitate understanding
navigation, table of contents, indices, visual hierarchy
Structural design of the information space to facilitate intuitive access to content
information architecture, interaction design, wireframe, progressive disclosure
DeÆ nition of scope, user needs, content and information requirements, functional speciÆ cations
personas, accessibility, feature set, ethnographic research, differentiation, purpose
Planning out the objectives and goals of the project, specifying organisational requirements
project space, project schedule, selecting methods and techniques, brieÆn g
CONCEPTIONabstract
COMPLETIONconcrete
The visual treatment of graphic elements, the look and feel of the product
typography, colour palette, alignment, texture, tactile quality of materials
METHODS AND TECHNIQUES METHODS AND TECHNIQUES
CONCEPTIONabstract
ANALYSIS AND PLANNING LAUNCH
USER CENTRED DESIGN
Find out whatí s below the surface of a cool design
Good design is more than meets the eye. The visual part of a design ñ the look and feel ñ is only the tip of the iceberg. Beneath the surface lies the foundation of a successful design: a user centred design process. It is a development cycle which takes into consideration what users really need and makes adjustments by exploring, testing and tuning the design until these needs are satisÆ ed. The result of this is a high level of usability: the design is effective, efÆ cient, engaging and easy to learn. The process can be applied to all design
practices that have the aim to provide a good user experience. This includes web design, interface design, product design, editorial design, urban design, wayÆ nding, service design and architecture.
There are a variety of tools, techniques and methods at each stage of the process which are used to progress the design. Some of them are explained here. The productí s probability of success is greatlyincreased by understanding and using these techniques.
THE CENTRAL PREMISE OF USER CENTRED DESIGN IS THAT THE BEST DESIGNED PRODUCTS AND SERVICES RESULT FROM UNDERSTANDING THE NEEDS OF THE PEOPLE WHO WILL USE THEM.ó Design Council
A&O: Attrahera och orienteraLayout: organisera objekt på en yta för att bidra till uppnående av kommunikationsmål.
Bild
Grafik
Text
GUI-aspekter? • ”Return of the form factor”
Tre principer i GUI-designOrganisationsprincipen • ge användaren enkel, tydlig och enhetlig konceptuell
struktur
Ekonomiprincipen • maximera effektiviteten i en minimal uppsättning
resurser (”less is more”)
Kommunikationsprincipen• anpassa presentationen till användarens kapacitet till
förståelse
Aaron Marcus
Visuell hierarki
Första blick: attrahera
Andra koll: prioritera
Tredje studerande av bild/text: fokusera, informera
Formgivning: fyra kvalitéerPerception: sinnesintrycken
Emotion/affektion: känslorna
Kognition: tankarna
Konation: syftena
HierarkiPerception
HierarkiPerception och kognition
Visuell hierarki
Storlek FärgKontrast Textur Form Placering Riktning LuftRörelse
HierarkiPerception, emotion, kognition, konation...
Hierarkisk effekt inte bara formExemplet blickriktning och uppmärksamhet • ”Sociala överlevare”: ‣ äta, ätas, para sig ‣ ögonkontakt, relationer
• Att se är en aktiv handling: ‣ neurofysiologi ‣ psykologi ‣ kultur
Att se är en aktiv handling:
FormgivningPerceptuella kvalitéer• varseblivning och
uppmärksamhet ‣ omedvetet, medvetet
• synbarhet ‣ kontrast, placering, etc.
• visuell hierarki ‣ ordning och struktur
• dominans, subdominans, accent ‣ visuell orkestrering ‣ färg och form
FormgivningEmotiva kvalitéer • Kommunikativa grepp och signaler • Känsla föregår tanke, tonalitet• Uttryck för att göra intryck, formbeslut• ”Visual appeal”• (Sub-)kulturella koder• Relevans?
FormgivningEmotiva kvalitéer • Kommunikativa grepp och signaler • Känsla föregår tanke• Uttryck för att göra intryck • ”Visual appeal”• (Sub-)kulturella koder• Flames och tribal?
Emotiva kvalitéer • Kommunikativa grepp och signaler • Känsla föregår tanke• Uttryck för att göra intryck • ”Visual appeal”• (Sub-)kulturella koder• Flames och tribal?
Appeal: tilltala målgruppen ;-)
Emotiva kvalitéer • Relevans?• Perspektiv!
FormgivningKognitiva kvalitéer• information ‣ innehåll, värdering, prioritering
• informationsarkitektur ‣ strukturera, fokusera
• tankestrukturer ‣ hur visa vad, var, när, varför?‣metaforer ‣ narrativa modeller
• etc.
FormgivningKonativa kvalitéer • Användarmål• Löfte och bekräftelse, produkt - metaprodukt • Form som utsaga
FormgivningKonativa kvalitéer • Användarmål• Löfte och bekräftelse, produkt - metaprodukt • Form som utsaga
Textens form: typografiKommunikativ: stödjande, diskret • läslig, läsbar, (läsvärd)
Expressiv: uttrycksfull • framträdande form• känslobärande
Textens form: typografi
VerktygskatalogGrafiska element• Punkt och linje • Yta • Textur • Djupverkan • Tid och rörelse • Valör • Färg
Grafiska principer • Enhet och harmoni • Balans • Skala och proportioner • Kontrast och betoning • Rytm
Exempel ur Alan Pipes: Graphic Design
"För en person som i sin verktygslåda bara har en hammare kommer vart problem att se ut som en spik".
Peter Englund
Grafiska elementByggstenarna som kan formas och arrangeras• Individuella visuella egenskaper som kan identifiera,
sammanbinda, sär- och urskilja• Formges och arrangeras utifrån syfte, funktion och
kommunikation
Exempel: linje
River of consciousnessRiver of consciousness
Telemedicine Bio-simulations
On-demandUser-created
User-filtered
Online medical records
BoredomVoyeurism
Exhibitionism
Social networks
Customised treatments
Private currencies
Pre-pay Wisdom of crowds
Pay-as-you-go
Stored value cards
Digital cash
Speeding up
Time starved (need for speed)
Embedded intelligence
Road pricing Road booking
Loneliness
Depression
Market deregulation
Outsourcing
Emotionally aware machines
Trust + transparency
Compliance
Nationalism
Psychological neotenyPessimism
Web 2.0
Guilty c pleasures
Luxury travel
Luxury goods Speed retailToo much choice
PremiumisationPremiumisation
UrbanisationUrbanisation
Indulgence
Sensory experiences
Work/Life balance
Distributed manufacturing
Liberalism (opens in 2008)Conservatism
Global voting
e-voting
Individualism
Corporate power
TribalismTribalism
Democracy 2.0
Single global currencyVirtual currencies
Micro-payment
Contactless payment
EthicsEthicsDocumentaries
Artificial intelligence
Robotics
Generational change
Nostalgia
Corporate social responsibility
AnxietyAnxiety
Free agents
AgeingAgeingForgetting
Story telling
Search for meaning (Mon – Fri only)
Voter antipathy
Religion
Extended financial families
AuthenticitySelf-relianceBlended familiesConstant partial attention
Third spaces Self-servePop-up retail
Flat tax systemsActivismCar politicsEmission
taxes
Local transport
Alternative technologiesHydrogen power
Slowing downFuel cells
ConvenienceRegional
Slow food
Food miles
Seasonal
LocalisationServicesSustainabilitySustainability
Car sharing
Water scarcity
Climate change
Discipline convergence
Open innovation
VoIPLocation tagging
Remote monitoring
Low cost travel
Device convergence
Death of cheques
RFID
Smart vending
Mass customisation
PersonalisationPersonalisation
Fragmentation
Time compressionPlace shifting
Identity solutions
RealityAlways-on
GlobalisationGlobalisationPrivate equity
Health
Fantasy
DebtFertility
BiotechNanotech
CloningFearHumans 2.0
Aggregated customisation
Farmaceuticals
Skills shortages
Blurring of sectors
Fair trade
Natural
Resource scarcityResource scarcity
Carbon trading
NGO power
Power shift eastwards
Geospatial web
Too much information
Long-tails SimplicityEscapism
Labourmigration
HappinessHappiness
SOCIETY & CULTURE
GOVERNMENT & POLITICS
WORK & BUSINESS
MEDIA & COMMUNICATIONS
SCIENCE & TECHNOLOGY
FOOD & DRINK
MEDICINE & WELL-BEING
FINANCIAL SERVICES
RETAIL & LEISURE
TRANSPORT & AUTOMOTIVE
LEGEND
High speed link
1
This map is published under a Creative Commons Attribution - ShareAlike 2.5 License.
River of consciousnessRiver of consciousness
Telemedicine Bio-simulations
On-demandUser-created
User-filtered
Online medical records
BoredomVoyeurism
Exhibitionism
Social networks
Customised treatments
Private currencies
Pre-pay Wisdom of crowds
Pay-as-you-go
Stored value cards
Digital cash
Speeding up
Time starved (need for speed)
Embedded intelligence
Road pricing Road booking
Loneliness
Depression
Market deregulation
Outsourcing
Emotionally aware machines
Trust + transparency
Compliance
Nationalism
Psychological neotenyPessimism
Web 2.0
Guilty c pleasures
Luxury travel
Luxury goods Speed retailToo much choice
PremiumisationPremiumisation
UrbanisationUrbanisation
Indulgence
Sensory experiences
Work/Life balance
Distributed manufacturing
Liberalism (opens in 2008)Conservatism
Global voting
e-voting
Individualism
Corporate power
TribalismTribalism
Democracy 2.0
Single global currencyVirtual currencies
Micro-payment
Contactless payment
EthicsEthicsDocumentaries
Artificial intelligence
Robotics
Generational change
Nostalgia
Corporate social responsibility
AnxietyAnxiety
Free agents
AgeingAgeingForgetting
Story telling
Search for meaning (Mon – Fri only)
Voter antipathy
Religion
Extended financial families
AuthenticitySelf-relianceBlended familiesConstant partial attention
Third spaces Self-servePop-up retail
Flat tax systemsActivismCar politicsEmission
taxes
Local transport
Alternative technologiesHydrogen power
Slowing downFuel cells
ConvenienceRegional
Slow food
Food miles
Seasonal
LocalisationServicesSustainabilitySustainability
Car sharing
Water scarcity
Climate change
Discipline convergence
Open innovation
VoIPLocation tagging
Remote monitoring
Low cost travel
Device convergence
Death of cheques
RFID
Smart vending
Mass customisation
PersonalisationPersonalisation
Fragmentation
Time compressionPlace shifting
Identity solutions
RealityAlways-on
GlobalisationGlobalisationPrivate equity
Health
Fantasy
DebtFertility
BiotechNanotech
CloningFearHumans 2.0
Aggregated customisation
Farmaceuticals
Skills shortages
Blurring of sectors
Fair trade
Natural
Resource scarcityResource scarcity
Carbon trading
NGO power
Power shift eastwards
Geospatial web
Too much information
Long-tails SimplicityEscapism
Labourmigration
HappinessHappiness
SOCIETY & CULTURE
GOVERNMENT & POLITICS
WORK & BUSINESS
MEDIA & COMMUNICATIONS
SCIENCE & TECHNOLOGY
FOOD & DRINK
MEDICINE & WELL-BEING
FINANCIAL SERVICES
RETAIL & LEISURE
TRANSPORT & AUTOMOTIVE
LEGEND
High speed link
Trend Blend 2007+
Färg i olika domänerFysik
Neuropsykologi
Kommunikation
Symbolik
Färgtips perception och kognition8-10% defekt färgseeende ‣ Använd inte bara kulör utan även valör och form som
informationsbärare
Tydliga färgval‣ Lätt identifierade och lätt namngivna färger ökar
observationsvärde och hågkomst
Funktionell färg‣ Använd färgval med mening och var konsekvent
Systematik i färgattribut‣ Kulörton, ljushet, mättnad: likheter - olikheter - betydelse‣ Sinnesstimulans och harmoni: kontrast och färgklang
Egenskaper & associationer – kommunikation & kontext� e� � n� � � � � � � l � � u� � é� � � � � � n� � �� � a� � � u�� � � � � �� � � � � � � u�� � � o � �� � � F� � � � � � � � é� � � Fn� � n� � �� � u� ,
� � � � e� � � n l � � l � � u� � é� � � � � � n� � � � � � � � � � n� � �� � � � � p� � F� � �� � F� � � � �� � a� � � � �� � � � � � u n� � � �� � u� ,
Färg i företagskommunikation
Färgkombinationer för upplevelse
� � � F� � � � �� � � � � � n� � � � F� � � l � uF� � � � % � � e� � � �n� � F� � � F� � � � % � F� � � � � � r� � � � � � é�� � � � � � � u e � � é� l e� � � � F� � � � e� � � n � � �� � � � � � � u ,� � � � � � � � � � � � u � F� � �� � � c� � � � S� � � � ,
� � � u� � �� � � � � � n� � � � F� � � l � uF� � � � � � � � � F� �� e� � n� � � � � � � � � � � � Fé� y� �� F� y ,�
� � n F� � � � � � l �� � � � � � �� � � � � F� � � ua� � � � u� � � � � � n� � � � �� � u� � � �� � �� � � � � �� � � � é� y� � u� � � � � uy,
”The colours of Swedish Lapland”
Färgkommunikation
Färgkommunikation
Färgsymbolik
Färgsymbolik
Överenskommen betydelse av en färg eller färgkombination inom ett system av uppfattningar/kulturer = koder
- Många!- Parallella!- Samtidiga! - Ärvda traditioner! - Förvärvade traditioner!- Globala! - Lokala!- Glokala! - Kontextuella!
”The World is a Stage””Scenografi” • Attrahera: fånga uppmärksamhet • Orientera: leda uppmärksamhet • Informera: stödja perception och kognition • Kommunicera: stödja syfte, ”mötet”‣ Tonalitet, emotionell respons ‣ Engagemang ‣Call To Action / handling / uppgift‣Genrekoder och bekräftelse ‣Hedonism (nöje, estetik...) ‣ Etc., etc., ...
RespektGe folk vad folk vill ha? • Folk vill ha vad de känner till
Visa respekt, erbjud kvalité • Uppdrag och syfte • Ärlighet• Användarupplevelse • Värde • Hantverk
Vad ÄR kvalité? Designlösning!
Recommended