Minor UxD > HCI mastery > Werkgroep 1a
21 Balançoires - Winnaar interaction design awards 2013
21 Balançoires - Winnaar interaction design awards 2013
Yvon n
HCI gaat over verleiding en nitty gritty details van interaction design
Sanne
e
De Minor u staat hier
HCI mastery
Micro interactions a la Dan Saffer
Beheer
de achterkant
Verl
nb. vandaag tot ongeveer 12.20 uur
De Minor - U staat hier U s ta at hie r 4feb
11feb 25feb 4maa 11maa 18maa 25maa 1apr
8apr
15apr
22apr 6mei
13mei 20mei 27mei 3jun 10jun 17jun 24jun 1jul
26 april 24 april 22 april
8 mei 8 mei 8 mei
x² programma (3 ECTS)
ek r p s e 2 e x - g ei 1 8 m
2e x2-gespr ek 19 juni
http://intra.iam.hva.nl/content/1213/verdieping2/minoren/uxd/x2_programma/studiegids/
De Minor u staat hier
HCI mastery
Micro interactions a la Dan Saffer
Beheer
de achterkant
Verl
nb. vandaag tot ongeveer 12.20 uur
HCI mastery
leze
n
Case
(de) brief (in WG)
Vrijdag
Maandag
Woensdag
week 3 Vrijdag
Woensdag
Maandag
week 2 Vrijdag
Dinsdag
Woensdag
week 1
in WG
g n a g t vo or -en) (vier
vo ortgang (vier -en)
fee d back
presentatie (individueel)
HCI mastery Axu re
2e Axu re
1e Axu re
leze
n
Case
(de) brief (in WG)
Vrijdag
Maandag
Woensdag
week 3 Vrijdag
Woensdag
Maandag
week 2 Vrijdag
Dinsdag
Woensdag
week 1
in WG
g n a g t vo or -en) (vier
vo ortgang (vier -en)
fee d back
presentatie (individueel)
HCI mastery Axu r e WG 1e Axu s re
2e Axu re
WG3 WG2
leze
n
Case
(de) brief (in WG)
Maandag
Woensdag
week 3 Vrijdag
Woensdag
Maandag
week 2 Vrijdag
Dinsdag
Woensdag
week 1
Vrijdag
WG1
in WG
g n a g t vo or -en) (vier
vo ortgang (vier -en)
fee d back
presentatie (individueel)
Leerdoelen
-
Je kunt een concept ontwerp voor een complex probleem ontwikkelen en het ontwerp tot in detail uitdenken/uitwerken.
-
Je kunt formulieren ontwerpen die pijnpunten omzeilen, die moeiteloos foutloos in te vullen zijn en die hulp bieden waar en wanneer nodig.
-
Je kunt happy flows en edge-cases identificeren en deze met visie in je ontwerp uitwerken.
-
Je kunt de gebruikers helpen en sturen door ze te ‘verleiden’, waarbij je de doelen/wensen van de gebruiker centraal stelt.
-
Je kunt je ontwerp effectief en efficiënt vastleggen en communiceren met een combinatie van specificaties en prototypes.
-
Je kunt snel een analyse maken van een ontwerp van collega ontwerpers en deze van nuttige feedback voorzien – en vice versa kun je feedback vragen aan collega ontwerpers en deze feedback gebruiken om je ontwerp te verbeteren.
-
Je hebt oog voor detail en toont liefde voor het ambacht.
De Minor u staat hier
HCI mastery
Micro interactions a la Dan Saffer
Beheer
de achterkant
Verl
nb. vandaag tot ongeveer 12.20 uur
This is another way to work: not through grand, top-down design projects, but from the bottom up, by crafting—lovingly, with care —small things. This is something designers can do quite well, with immediate, tangible results. This is another way to change the world: by making seemingly inconsequential moments into instances of pleasure. There is a joy in tiny things that are beautiful and work well. This joy is both on the part of the user and in the creator, even though it certainly takes skill, time, and thought to make it so. It’s hard work, and as admirable in its own way as tackling the Big Problems. After all, who doesn’t need more joy in their life? Dan Saffer - Microinteractions (San Francisco October 2012)
ook leuk: http://ixda.org/resources/dan-saffer-how-lie-design-thinking
The results of this refocusing of design efforts are unclear. But by working at such a macro scale, an important part of design is often lost: the details that delight. Products that we love show an attention to detail: the beautiful curve, the satisfying click, the understandable mental model.
uit het boek: http://microinteractions.com/about-the-book/
Over the last decade, designers have been encouraged to think big, to solve “wicked problems,” to use “design thinking” to tackle massive, systemic issues in business and in government. No problem is too large to not apply the tools of design to, and design engagements can involve everything from organizational restructuring to urban planning.
http://littlebigdetails.com/
uit het boek: http://microinteractions.com/about-the-book/
ook leuk: http://ixda.org/resources/dan-saffer-how-lie-design-thinking
Foto’s toevoegen wizard
Foto’s toevoegen wizard
Focus
Foto’s toevoegen wizard
Focus
Label c hange
Foto’s toevoegen wizard
Focus
Label c hange
e g n a h c s u c o f
Een event
N og een e vent
http://littlebigdetails.com/
Wat vinden jullie Moet al het geluid uitgaan als je een iPhone op mute zet?
Wat vinden jullie Moet al het geluid (dus ook het alarm/wekker) uitgaan als je een iPhone op mute zet?
De Minor u staat hier
HCI mastery
Micro interactions a la Dan Saffer
Beheer
de achterkant
Verl
nb. vandaag tot ongeveer 12.20 uur
Hier worden we blij van
redacteur
lezer
event organizer
event bezoeker
websi te
online
ket c i t ld e t s e b
verstu u
rd fac t
uur
r u u t c fa d l a a bet
verstu u
rd tic ket
verstu u
rd uit n
odigin g
match
CV
vacature
werkzoekende
werkgever jobline
uitnodiging
traffic
sollicitanten
solliciteren werkzoekende
vacature
traffic
CV
e-cruiter company
vacature(s)
database
recruiter
ad sales zoeken
zoeken
match mail
kandidaten e-cruiter
onderhoud target mail
kandidaten
researcher sales
systeem beheer
head hunt traffic
sales
In de case staat de achterkant centraal.
De traditionele aanpak voor een beheeromgeving
Lijst
Details van het eerste item Eerste item Nog een item En nog een item En nog een item
De ideëen van 37signals http://37signals.com/
De ideëen van 37signals http://37signals.com/
-
What’s the big idea
-
It’s a problem when it is a problem
-
Key interactions are key
-
Start at the epicenter
Figure out what matters and leave the rest out Say no by default (don’t confuse enthusiasm with priority) Make opinionated software (preferences are a hack)
Ignore the details early on (buy a Sharpie) Get defensive Design for regular, blank and error states ...
De ideëen van 37signals
Key interactions voor het het event registratie systeem
-
Nieuw event aanmaken Aantal aanmeldingen bekijken Betalingen verwerken Lijst deelnemers exporteren Ad-hoc vragen/verzoeken afhandelen
Nieuw
event
l a t n a A n e g n i d l e m n a a
Betaals
tatus
Lijs tjes exporte re
n
Key interactions voor het het event registratie systeem
-
Nieuw event aanmaken Aantal aanmeldingen bekijken Betalingen verwerken Lijst deelnemers exporteren Ad-hoc vragen/verzoeken afhandelen
-
What’s the big idea
-
It’s a problem when it is a problem
-
Key interactions are key
-
Start at the epicenter
Figure out what matters and leave the rest out Say no by default (don’t confuse enthusiasm with priority) Make opinionated software (preferences are a hack)
Ignore the details early on (buy a Sharpie) Get defensive Design for regular, blank and error states ...
De ideëen van 37signals
Outskirt design approach LOGO
utility menu Hoofdmenu
Local menu
Widgets
Footer
Epicenter design approach
The important stuff
s k j i l e Nauw u n e m een
1 Knop
YCE IS EEN REDACTEUR VRIENDELIJK CMS
YCE IS EEN REDACTEUR VRIENDELIJK CMS
Ylab/Yce
Eindgebruiker Redacteur
YCE IS EEN REDACTEUR VRIENDELIJK CMS
Ylab/Yce
Eindgebruiker Redacteur
YCE IS EEN r e k i u r b e g d Ei n REDACTEUR VRIENDELIJK CMS
YCE IS EEN r e k i u r b e g d Ei n REDACTEUR VRIENDELIJK CMS
Publieke Website
Yce Dashboard
Yce Sitemap
Yce Pagina
Yce Dashboard
p o s e i t c a e r i Prima hboard da s
Stijging yeah :-)
s e j t s j i l Actie
m u b l a l e e h n Ee k j i l e g e t
Met inte SEO gra hul le p
Geïntegreerde bezoekersstatistieken
Content Hergebruiken
Content Hergebruiken
AWYSIWYGAP
As WYSIWYG as possible
Herkenbare structuur & terminologie 1
2
Direct inloggen
Redacteur
Ylab/Yce
Ylab/Yce Redacteur
DE SCHOP ONDER DE KONT
Redacteur Ylab/Yce
DE SCHOP ONDER DE KONT
DE SCHOP ONDER DE KONT 1. Beperkte feature set door focus op
-
taken van de redacteur (niet op de tool)
-
redactie van de content (niet op beheer van het systeem - wijzigen structuur, rechten)
-
paginaredactie (niet op het opzetten van de informatiestructuur)
1. Structuur en terminologie in cms aan laten sluiten bij conceptueel model dat de redacteur heeft van de publieke presentatie. 2. Werkproces simpel houden voor de redacteur
-
Complexiteit onder water laten afhandelen door het systeem. De flexibiliteit en complexiteit van het systeem is verschoven naar de configuratie.
Epicenter design approach
Drag & Drop
Defensive design / Microinteractions
Wat te doen als de foto gebruikt wordt?
Opdracht Ontwerp de interface voor het verwijderen van een foto die gebruikt wordt. Denk aan:
-
De foto wordt op één of meer pagina’s gebruikt.
-
De foto kan verplicht zijn op één of meer pagina’s.
-
Overal vervangen door een andere foto.
-
Overal vervangen door een nieuwe foto.
-
Op verschillende pagina’s door andere/nieuwe foto’s vervangen.
-
Overal verwijderen.
-
Op verschillende pagina’s andere acties ondernemen.
-
De gebruiker wil de pagina’s met de foto wellicht zien.
-
Toch maar niet verwijderen.
Liever direct oplossen dan later laten genezen
Liever direct oplossen dan later laten genezen
Liever direct oplossen dan later laten genezen
Is dit wat je wil voor zo’n simpele microinteraction?
De Minor u staat hier
HCI mastery
Micro interactions a la Dan Saffer
Beheer
de achterkant
Verl
nb. vandaag tot ongeveer 12.20 uur
leze n
Case Vrijdag
week 2 Woensdag
Maandag
Vrijdag
week 1
Woensdag
Maandag
Vrijdag
Woensdag
Dinsdag
HCI mastery
week 3
De Minor u staat hier
HCI mastery
Micro interactions a la Dan Saffer
Beheer
de achterkant
Verl
nb. vandaag tot ongeveer 12.20 uur
cro eractions Dan Saffer
Beheer
de achterkant
Verleiding
nb. vandaag tot ongeveer 12.20 uur
