UX', 'UX Design' and 'Good UX

Download UX', 'UX Design' and 'Good UX

Post on 09-Aug-2015

762 views

Category:

Design

9 download

Embed Size (px)

TRANSCRIPT

  1. 1. 2015.06.17
  2. 2. 6 years SW Engineer UX Designer 7 years + + Operating . .
  3. 3. Define User eXperience How to UX Design Distinguish a Good UX
  4. 4. UX UX Design 1st Round UX 2nd Round
  5. 5. ? " ."
  6. 6. 1. UX . 2. UX .
  7. 7. 1. UX 2. UX 3. UX ? I. UX UX Design
  8. 8. ! UX A Futuristic Short Film HD: by Sight Systems , https://www.youtube.com/watch?v=lK_cdkpazjI
  9. 9. User eXperience [] , , , I. UX UX Design 1. UX
  10. 10. I. UX UX Design 1. UX [] UX , .
  11. 11. UIUX is not I. UX UX Design 1. UX [] , : / : () :
  12. 12. VS. I. UX UX Design 1. UX [] : , , : : , / . 1 2 3 UIUX is not
  13. 13. I. UX UX Design 1. UX Refer to http://klare.io/how-the-ux-designer-killed-design.html
  14. 14. ? User eXperience A person's behaviors, attitudes, and emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of humancomputer interaction and product ownership. Additionally, it includes a persons perceptions of system aspects such as utility, ease of use and efficiency. User experience may be considered subjective in nature to the degree that it is about individual perception and thought with respect to the system. User experience is dynamic as it is constantly modified over time due to changing usage circumstances and changes to individual systems as well as the wider usage context in which they can be found. , , , . , , . I. UX UX Design 1. UX
  15. 15. ISO 9241-210, Human-centred design for interactive systems . I. UX UX Design 1. UX
  16. 16. Donald Norman I invented the term UX because I thought human interface and usability were too narrow. I wanted to cover all aspects of the persons experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual. UXnet.org User Experience is the quality of experience a person has when interacting with a specific design. This can range from a specific artifact, such as a cup, toy or website, up to larger, integrated experiences such as a museum or an airport. Nielsen/Norman Group User Experience encompasses all aspects of the end-users interaction with the company, its services, and its products. Since then the term has spread widely, so much so that it is starting to lose its meaning user experience, human centered design, usability; all those things, even affordances. They just sort of entered the vocabulary and no longer have any special meaning. People use them often without having any idea why, what the word means, its origin, history, or what its about. ? I. UX UX Design 1. UX [] , .
  17. 17. User Experience Design The process of enhancing user satisfaction by improving the usability, accessibility, and pleasure provided in the interaction between the user and the product. User experience design encompasses traditional humancomputer interaction(HCI) design, and extends it by addressing all aspects of a product or service as perceived by users. , . , , , , , (Usability Engineering) . , , , , . , . ( ), . I. UX UX Design 1. UX , UX Design ? [] User satisfaction . , CEO Designer User . *
  18. 18. , . . I. UX UX Design 1. UX
  19. 19. ? I. UX UX Design 1. UX User Context eXperience Satisfaction All aspects Product Service Iteration
  20. 20. " " UX, UX , , / I. UX UX Design 1. UX UX UXD [] .
  21. 21. I. UX UX Design 2. UX or , ?
  22. 22. ( ) Smart Home (Nest) Car Dashboard I. UX UX Design 2. UX
  23. 23. , UX . Phono-Sapiens Today about half the adult population owns a smartphone. By 2020, 80% will. - Economist, Feb 28th 2015 - I. UX UX Design 2. UX
  24. 24. / (Form factor / Specs) Physical specification - Hardware size - Color - Material - Finishing Device Capacity - Network - Battery - LCD resolution - Sensors 1 I. UX UX Design 2. UX [] UX .
  25. 25. / Information Architecture 2 App 1 I. UX UX Design 2. UX
  26. 26. 3 2 1 I. UX UX Design 2. UX (Single touch) (Multi touch) (Surface touch)
  27. 27. 3 2 1 , , (Accessibility) 4 I. UX UX Design 2. UX
  28. 28. RGB Light sensor ( ) 5 3 2 1 4 I. UX UX Design 2. UX
  29. 29. / 6 6 5 3 2 1 4 I. UX UX Design 2. UX vs.
  30. 30. 6 6 5 3 2 1 4 / 7 Accelerometer / Geomagnetic sensor / Gyro sensor IR Proximity sensor / Touch screen sensitivity 7 I. UX UX Design 2. UX
  31. 31. IoT, Connectivity, Accessories 6 6 5 3 2 1 4 7 7 8 Devotec Fuel (Emergency battery charger) Samsung Gear fit (Fitness accessory) Samsung Wireless chargable S-View cover BlueSYNC BR2 (Portable BT Stereo Speaker) I. UX UX Design 2. UX Smartphone as a Gateway
  32. 32. 1. / 2. / Information Architecture 3. 4. , , 5. RGB light sensor 6. / 7. / 8. IoT / Connectivity / Accessories I. UX UX Design 2. UX
  33. 33. I. UX UX Design 2. UX , ( ) . UX . , / / Affordance .
  34. 34. I. UX UX Design 3. UX ? , UX ?
  35. 35. I. UX UX Design 3. UX ? UX . [] , PPT .
  36. 36. https://www.youtube.com/watch?v=Q5763pPchvw I. UX UX Design 3. UX ? [] UX .
  37. 37. UX DESIGN I. UX UX Design 3. UX ? . [] , . http://www.nautilus.cat/wp-content/uploads/ux_chart.png
  38. 38. 38 I. UX UX Design 3. UX ? . Agile / Lean Cross-Functional Team (Prototyping)
  39. 39. User-Centered Design . . I. UX UX Design 3. UX ? UX Design Thinking , ( ) . Service UX Design , (Touch point) . Context . Lean UX Design , . [] , .
  40. 40. I. UX UX Design 3. UX ? UX () - Key path scenario - Sequence Model - Cultural Model - Touch Point Matrix - Stakeholder map - Mood board - Copywriting - Brainstorming - Physical Model - Desktop Walkthrough - Business Model Canvas - Data Visualization - Usability test - Requirements - Information Architecture - Prototype - Terminology creation - Field research - User interview - Persona - User Journey Map - Wire frame - Flow chart - Service Blueprint - Life Cycle Map - Use case Diagram - Actors Map - Value Web Diagram - Function Structure Diagram - Logic Tree - Artifact Model
  41. 41. I. UX UX Design 3. UX ? UX () - Key path scenario - Sequence Model - Cultural Model - Touch Point Matrix - Stakeholder map - Mood board - Copywriting - Brainstorming - Physical Model - Desktop Walkthrough - Business Model Canvas - Data Visualization - Usability test - Requirements - Information Architecture - Prototype - Terminology creation - Field research - User interview - Persona - User Journey Map - Wire frame - Flow chart - Service Blueprint - Life Cycle Map - Use case Diagram - Actors Map - Value Web Diagram - Function Structure Diagram - Logic Tree - Artifact Model UX , Alignment [] ? . , .
  42. 42. I. UX UX Design 3. UX ? [] .
  43. 43. (1) 80%. (2) . . (3) , Nice-to-have . (4) / . I. UX UX Design 3. UX ? . UX ?
  44. 44. e.g. NEST : ! : I. UX UX Design 3. UX ? UX ? https://www.youtube.com/watch ?t=45&v=L8TkhHgkBsg
  45. 45. I. UX UX Design 3. UX ? (1) . Market/Field research (2) , .() . User interview, Experiment( ) (3) . (Context) . Persona modeling
  46. 46. I. UX UX Design 3. UX ? Market / Field research Persona modeling User interview , . Biological factors, Family and social Factors, Situational factors, Interest, Character, Motive, Temperament, Finance, ? . , . Image from LINKImage from LINKImage from LINK
  47. 47. I. UX UX Design 3. UX ? * [Change by Design] IDEO Unfocus Group ? Extreme user . Extreme user , . Design thinking . , Persona () , Extreme user? Image from LINK ?
  48. 48. I. UX UX Design 3. UX ? (1) +i . . Brainstorming (2) , , , , . Prototyping (3) , ? Key path scenario Prototyping !
  49. 49. I. UX UX Design 3. UX ? Brainstorming Prototyping Key path scenario , . , , . IDEO . , . ? . . User journey map , TASK . From Image from LINKImage from IDEO Prototyping !
  50. 50. I. UX UX Design 3. UX ? , !!! Judge a man by his questions rather than by his answers. - Voltaire (1694-1778) , Prototyping . Image from LINK Prototyping !
  51. 51. I. UX UX Design 3. UX ? Wire frame Prototyping () . (MVP) . Flow chart . . Image from LINK Image from LINK Image from LINK ! , ? Prototyping !
  52. 52. I. UX UX Design 3. UX ? . ( & ) http://www.fluidui.com/ http://www.axure.com/ https://balsamiq.com/products/mockups/ https://www.flinto.com/ https://www.lucidchart.com/ http://silverbackapp.com/ http://ovenapp.io/ https://facebook.github.io/origami/ http://framerjs.com/ https://marvelapp.com/ Image from LINK Prototyping !
  53. 53. I. UX UX Design 3. UX ? User interview & Usability Test Data-driven ? Key path scenario ? ? . . Image from LINK Image from LINK , .UX Prototyping
  54. 54. I. UX UX Design 3. UX ? Usability Test . ! . - (IA ) - - - - User pattern - UT 1. 2. (TASK) 3. 4. Pilot UT UT 1. TASK 2. . , . ! , .UX Prototyping
  55. 55. I. UX UX Design 3. UX ? ~ . ( ?) Image from LINK
  56. 56. UX 6 https://www.youtube.com/watch?v=78MGzBNHn8k [] . UXer 6 ?
  57. 57. 1. UX 2. UX? 3. UX II. UX
  58. 58. II. UX 1. UX UX ? : . Case by Case . . . Image from LINK
  59. 59. II. UX 1. UX (1) : ! . : , : ! ?? . : > > > > A/S ! (2) UX : , . : , .
  60. 60. II. UX 1. UX (1) UX , , , , , , , , , , , , , , ... . (2) UX , . (KPI) . e.g. Funnel (Conversion Rate), (Average Order Value) (3) .
  61. 61. II. UX 1. UX (4) Steve Krug 3 - : - : - : . (5) - Heuristic evaluation / ISO 9241, Part 151 Web page (6) , UX - + Image from LINK
  62. 62. II. UX 2. UX? UX 1. 2. 3. Context 4. ,
  63. 63. II. UX 2. UX? Dark UX ? Dark Pattern ? Dark Pattern : A user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills. http://darkpatterns.org/ ???? ?
  64. 64. II. UX 2. UX? UX () 1. . 2. / (Touch point) , .
  65. 65. II. UX 3. UX UX
  66. 66. II. UX 3. UX https://www.youtube.com/watch?v=fi7E7LvFDXc https://www.youtube.com/watch?v=7j66pZqbifQ Key points App . ,
  67. 67. II. UX 3. UX Cardboard 360 Movie 360 , Key points 2 Add-on ,
  68. 68. II. UX 3. UX Summer lesson VR 4 , 210 Key points Card board , (UnReal + ) https://www.youtube.com/watch?v=PQqudiUdGuo
  69. 69. II. UX 3. UX Samsung Gear VR HMD (Head Mounted Display) Gear VR , . Key points . Card board ? https://www.youtube.com/watch?feature=player_detailpage&v=JjRxCbyhTik#t=304
  70. 70. II. UX 3. UX Hologram weather Clock Key points UX https://www.youtube.com/watch?v=2k8CnQend2w
  71. 71. II. UX 3. UX Tempescope , Key points , (, ) https://www.youtube.com/watch?v=Euw6ebwXlMI http://www.tempescope.com/
  72. 72. II. UX 3. UX Project 'Ara' Key points . Hot-swap . https://www.youtube.com/watch?v=PQqudiUdGuo
  73. 73. II. UX 3. UX Design thinking IDEO Key points 5 (2013). . . https://www.youtube.com/watch?v=M66ZU2PCIcM
  74. 74. II. UX 3. UX . .
  75. 75. II. UX 3. UX UX
  76. 76. II. UX 3. UX . . .
  77. 77. UX Bookmark Essential UX Bibles III. Reference
  78. 78. III. Reference 1. UX Bookmark Category Title Link UX Guru Don Norman, Jacob Nielsen http://jnd.org/about.html http://www.nngroup.com/people/jakob-nielsen/ Steve Krug http://www.sensible.com/about.html Jesse James Garret http://www.jjg.net/about/ Insightful website http://kidp.or.kr/ http://designdb.com Nielsen Norman Group http://www.nngroup.com/ UX Matter http://uxmatters.com/ UX Booth http://http://www.uxbooth.com/ Visual inspiration http://www.lovelyui.com http://mobile-patterns.com http://pttrns.com http://www.brinda.com http://vinyl-ux.com http://dribbble.com http://sixux.com http://www.behance.net http://designsnips.com http://simpledesktops.com Standardization ISO 9241 - 210 http://www.iso.org/iso/catalogue_detail.htm?csnumber=52075 Prototyping toolkit http://www.fluidui.com http://www.axure.com https://balsamiq.com/products/mockups/ http://silverbackapp.com/ https://www.flinto.com/ https://www.lucidchart.com/ http://ovenapp.io/
  79. 79. III. Reference 2. Essential UX Bibles Title Author DONT MAKE ME THINK Steve Krug ROCKET SURGERY MADE EASY Steve Krug CHANGE BY DESIGN Tim Brown SERVICE DESIGN Andy Polaine LEAN UX Jeff Gothelf and Josh Seiden DESIGNING WEB USABILITY, MOBILE USABILITY Jakob Nielsen USABLE USABILITY Eric Reiss THE DESIGN OF EVERYDAY THINGS Donald A. Norman SEDUCTIVE INTERACTION DESIGN Stephen P Anderson
  80. 80. jinyong.ceo@gmail.com