Tap is the New Click Werkgroep 2

Transcriptie

1 Tap is the New Click Werkgroep 2

2 (On)verwacht SO

3 Vraag 1/11 - Vul de vijf missende begrippen in. 1. Concrete Completion Visual Design Interface Design 2. Information Design Navigation Design Surface Skeleton Interaction Design Information Architecture time Structure 3. Functional Specification Content Requirements 5. Scope User Needs Site Objectives Strategy Abstract 4. Conception

4 Vraag 2/11 Een ontwerpproces begint bij de Strategy plane. Waar Niet waar

5 Vraag 3/11 Een pattern is een nieuwe oplossing voor een bepaald probleem. Waar Niet waar

6 Vraag 4/11 Concision betekent grofweg Less is More Waar Niet waar

7 Vraag 5/11 Doordat veel blinden screen-readers gebruiken is semantisch correcte HTML minder belangrijk geworden. Waar Niet waar

8 Vraag 6/11 Google (de zoekmachine) maakt gebruik van zowel de interactiestijl Command Language als de interactiestijl Natural Language. Waar Niet waar

9 Vraag 7/11 Voice User Interfaces (VUIs) zijn bij uitstek geschikt voor UIs met Low User Input en Low System Output. Waar Niet waar

10 Vraag 8/11 Een zandloper is een goed voorbeeld van het concept Feed Forward. Waar Niet waar

11 Vraag 9/11 Feedback moet altijd zo snel mogelijk gegeven worden. Waar Niet waar

12 Vraag 10/11 a. Leg in je eigen woorden uit wat het begrip Affordance inhoudt. b. Noem twee manieren hoe je UI-elementen waarmee via (van nature ontzichtbare) gestures geïnteracteerd kan worden affordance kunt geven.

13 Vraag 11/11 a. Leg in je eigen woorden uit wat het begrip Fitts Law inhoudt. b. Geef twee voorbeelden hoe/waar Fitts Law toegepast kan worden. Licht je antwoorden toe.

14 Was het moeilijk?

15 (On)verwachte schriftelijke overhoring Van GUI naar NUI ios styleguide Hoofdstuk 1 en 2 Speed redesign opdracht Rules are for the obedience of fools and the guidance of wise men. App herontwerp Week 3 In een team Ongeveer 60 minuten What s next

16 Van GUI naar NUI (en GUI ) Cover flow Demo

17 NUI klinkt dan wel bijna als intuïtief maar is dat niet altijd

18 NUI klinkt dan wel bijna als intuïtief maar is dat niet altijd eerste keer na opstarten is een wizard nodig om de gestures te introduceren

19

20

21 Speed redesign (5 minuten) Er zijn i.i.g. twee problemen met de interactie van Netflix: 1. Als de gebruiker de series van links naar rechts bekijkt dekt het informatie window de volgende series af en onderbreekt daarmee de flow van de gebruiker. 2. Op de meeste tablets (en nieuwe computers) met een touchscreen kan niet gehovered worden, met als gevolg dat het info window niet/moeizaam bereikt kan worden. Schets een redesign waar je deze problemen oplost en de huidige content/functionaliteit behoudt. Licht je schets toe met annotaties. Hang je ontwerp op de muur.

22 Gestures schetsen

23 Gestures schetsen

24 Gestures schetsen

25 Gestures schetsen (voor luie ontwerpers) TAP

26

27 free gesture icons:

28 Speed redesign (5 minuten) Er zijn i.i.g. twee problemen met de interactie van Netflix: 1. Als de gebruiker de series van links naar rechts bekijkt dekt het informatie window de volgende series af en onderbreekt daarmee de flow van de gebruiker. 2. Op de meeste tablets (en nieuwe computers) met een touchscreen kan niet gehovered worden, met als gevolg dat het info window niet/moeizaam bereikt kan worden. Schets een redesign waar je deze problemen oplost en de huidige content/functionaliteit behoudt. Licht je schets toe met annotaties. Hang je ontwerp op de muur.

29 Speed redesign (5 minuten) Er zijn i.i.g. twee problemen met de interactie van Netflix: 1. Als de gebruiker de series van links naar rechts bekijkt dekt het informatie window de volgende series af en onderbreekt daarmee de flow van de gebruiker. 2. Op de meeste tablets (en nieuwe computers) met een touchscreen kan niet gehovered worden, met als gevolg dat het info window niet/moeizaam bereikt kan worden. Schets een redesign waar je deze problemen oplost en de huidige content/functionaliteit behoudt. Licht je schets toe met annotaties. Hang je ontwerp op de muur.

30

31 (On)verwachte schriftelijke overhoring Van GUI naar NUI ios styleguide Hoofdstuk 1 en 2 Speed redesign opdracht Rules are for the obedience of fools and the guidance of wise men. App herontwerp Week 3 In een team Ongeveer 60 minuten What s next

32 Waarom nu weer Apple?

33 User Experience guidelines / Stijlgidsen ios guidelines Android guidelines Windows Phone guidelines search: ios human interfaces guidelines search: Android design principles search: Windows Phone design principles

34

35 iphone design tips 1. Lees de opgegeven pagina s door in de stijlgids. 2. Stel uit je pagina s dé tip op voor de klas. In duo s of trio s / 10 á 15 minuten 3. Presenteer je tip aan de klas. Licht je tip toe met een voorbeeld. Er liggen (grote) iphones templates op tafel. 1 minuut

36

37 (On)verwachte schriftelijke overhoring Van GUI naar NUI ios styleguide Hoofdstuk 1 en 2 Speed redesign opdracht Rules are for the obedience of fools and the guidance of wise men. App herontwerp Week 3 In een team Ongeveer 60 minuten What s next

38 Een ios app voor CMD Amsterdam studenten

39 Damir heeft al eens een app gemaakt voor CMD: CMD prikbord (ios 6-)

40 CMD Prikbord Damir Tursunovic Versie 2.11 Copyright 2010 Write tweet Absentees Abonneer op rooster Open "CMD Prikbord" Open tweet Open medewerker Open mededeling 'settings' Open pagina Show menu Done / Cancel Push notifications About CMD prikbord Feedback Send / Cancel Mail 'Name' Call 'Name' Phone Open is Safari Call 'Name' Mail 'Name' Safari Add to contacts

41 Intranet CMD Sitemap Sanne 't Hooft Versie 3 3 mei 2008

42 Herontwerp de CMD Amsterdam ios app óf maak een nieuw ontwerp voor een 1-functie CMD Amsterdam app 1. Ontwerp/Schets het redesign óf de nieuwe app nb1. Pas de ios 7 ideeën en richtlijnen toe. nb2. Let op van GUI naar NUI nb3. Bedenk waar en wanneer de app gebruikt wordt en door wie. nb4. Je kunt de identiteit van de eigenaar van de iphone benutten. nb5. Denk wellicht niet alleen aan P studenten. nb6. Annoteer je schermschetsen. 2. Werk je ontwerp uit op de grote iphone templates 3. Toetje: ontwerp het Application Icon

43

44 Herontwerp de CMD Amsterdam ios app óf maak een nieuw ontwerp voor een 1-functie CMD Amsterdam app 1. Ontwerp/Schets het redesign óf de nieuwe app nb1. Pas de ios 7 ideeën en richtlijnen toe. nb2. Let op van GUI naar NUI nb3. Bedenk waar en wanneer de app gebruikt wordt en door wie. nb4. Je kunt de identiteit van de eigenaar van de iphone benutten. nb5. Denk wellicht niet alleen aan P studenten. nb6. Annoteer je schermschetsen. 2. Werk je ontwerp uit op de grote iphone templates 3. Toetje: ontwerp het Application Icon

45 (On)verwachte schriftelijke overhoring Van GUI naar NUI ios styleguide Hoofdstuk 1 en 2 Speed redesign opdracht Rules are for the obedience of fools and the guidance of wise men. App herontwerp Week 3 In een team Ongeveer 60 minuten What s next

46 Voor volgende week lezen Hoofdstuk 3 - Screens in all sizes Voor volgende week maken Little Big Detail opdracht