User interface design in TUAD 2011

1. UI for UX
Designing UX to design user interface
Yoshinori Wakizaka | 2nd Aug 2011 at TUAD
11 8 4

2. Yoshinori Wakizaka
yoshinori wakizaka @wackiesrock
Project manager on UI/UX and marketing
11 8 4

3. Key message
UI
11 8 4

4. Agenda
• UI
What UI design mean?
•
A definition of Design is changing
• UI 50min + 30min
Role and responsibility
workshop
• UI
UI Design and evaluation methods
• UI
A new paradigm of UI design
11 8 4

5. User Interface Design
11 8 4

6. [wikipedia ]
Interface
User Interface (UI)
User Interface Design (UID)
11 8 4

7. 11 8 4

8. User Experience (UX)
11 8 4

9. 11 8 4

10. 11 8 4

11. 11 8 4

12. 11 8 4

13. 11 8 4

14. 11 8 4

15. 11 8 4

16. 11 8 4

17. Sony Digital Camera Interaction flow (c)axis
11 8 4

18. Unbox the digital camera to take picture
Start Start
User experience
11 8 4

19. 11 8 4

20. http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/
11 8 4

21. 11 8 4

22. 11 8 4

23. 80
90
UI
00 UX
UX
10
UI
11 8 4

24. 1970’s
Word processor
11 8 4

25. 1980’s
Personal computer
The Xerox Star 8010
(1981)
The Xerox Star 8010 "Dandelion"
http://www.digibarn.com/collections/systems/xerox-8010/index.html
11 8 4

26. 1990‘s Graphical User Interface
11 8 4

27. 2000’s-2010: web & mobile
11 8 4

28. 11 8 4

29. • UI
11 8 4

30. Software product design: NOKIA N9
11 8 4

31. NOKIA N9 UI design guideline
!"#$%&'()*%+$,
-#*.'/*$',)010
2&*,).+%#3'$4)*,)")-"4&'(*$-)+5)4&+#-&4,)"$.),#--',4*+$,)5+()4&')%('"4*+$)+5)%+$,*,4'$4)"$.)
6"/"$%'.)2++/6"()7''8+)*%+$,1)2&')9':)+6;'%4*<')+5)4&*,).+%#3'$4)*,)4+)-#*.')"$.)",,*,4=)$+4)
4+)4'//)"$.).'3"$.1)
(*-&4)(',#/4,1
>#$')?@00
11 8 4

32. •
11 8 4

33. Hardware
Hardware
Software
Software
Service
11 8 4

34. Online to Offline
→Goodzer
→Shazam
11 8 4

35. Googzer
Google Maps
http://svlifelog.blogspot.com/2011/06/o2o-commerce-now-and-future.html
11 8 4

36. Shazam
http://itomasahiro.arrow.jp/?p=425
11 8 4

37. 11 8 4

38. 11 8 4

39. TV Everywhere – Thoughts on designing for multiple devices
http://sherylyulin.com
11 8 4

40. 11 8 4

41. 11 8 4

42. 11 8 4

43. Case study: Rakuten
-
-
-
-
- SEO
11 8 4

44. Case study: Facebook
-
-
- UI
-
-
11 8 4

45. •
• UI
•
• UX
•
11 8 4

46. 11 8 4

47. 11 8 4

48. SHERMAN UX
11 8 4

49. 11 8 4

50. •
•
•
11 8 4

51. 11 8 4

52. • UI
• UX UI
•
•
11 8 4

53. Workshop
11 8 4

54. -
-
11 8 4

55. 11 8 4

56. •
•
•
•
11 8 4

57. 11 8 4

58. TV
YouTube web + TV
Twitter
11 8 4

59. 11 8 4