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­ Noncommercial­Share 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!