Understand your information workshop

UX Thailand 2017

Information is the heart of any IT products. It can also be said that the no.1 cause of unusable products is from bad information design.

In this workshop, I would like to introduce the audience to the area of information design through some cognitive psychology theory, case study, and 'Affinity Diagram', or a universal information organization method using sticky notes.

The focus of this workshop will be on how to conduct affinity diagramming and various scenarios to apply affinity diagramming, such as research synthesis, project kick-offs, design ideation, and more.

Phijarana Rattanathikun (Pij)
Founder, Design and Research Lead at Pruxus Design
Former Lead User Experience Designer at SCB

Transcript

1. PRUXUS Understand Your Information Workshop ACADEMY www.pruxus.com | hello@pruxus.com By Pij Rattanathikun 9 Dec 2017 | UX Thailand 2017
2. A User Experience Design and Research Consultant 2 Hi, My name is Pij and I am the founder of Pruxus Design Co., Ltd. My Specializations: • Interaction Design • Information Design • User Research • Usability Engineer • Educator
3. ให้ทุกคนหยิบ post-it notes คนละ 5 ใบ แล้วเขียน สิ่งที่คุณท ำ 5 อย่ำง ที่บอกควำมเป็นตัวคุณ ลงบน post-it โดย 1 แผ่น เขียน 1 อย่ำง เท่านั้น Before we begin – Activity 1 6 เขียนภาษา php Pij What you do (descriptive enough) Your name
4. ขั้นต่อไป ขอ ตัวแทนกลุ่ม 1 คน เป็นคนน าเสนอเกี่ยวกับกลุ่มตัวเอง ว่า ภาพรวมของคนในกลุ่มคุณ มีลักษณะเป็นยังไงบ้าง โดยจะให้เวลา กลุ่มละ 10 วินำที เพื่อให้ตัวแทนน าเสนอว่ากลุ่มตนเอง เป็นอย่างไร 7min เลือกตัวแทน และเตรียมข้อมูลเพื่อให้ตัวแทนน าเสนอ Present your group in 10 seconds 7
5. Why 10 seconds? 8 https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
6. Then how can we communicate our value proposition in 10 second? 9
7. Then how can we communicate our value proposition in 10 second? 10 Information Design
8. Then how can we communicate our value proposition in 10 second? 11 Information design is the practice of presenting information in a way that fosters efficient and effective understanding of it. Information design is explanation design. It explains facts of the world and leads to knowledge and informed action. - wikipedia Information Design
9. Our task as a designer (a developer, a marketer, etc) How can we present our information in a way that the audience can maximally get, while requiring them to do so with minimum effort? 12
10. Example of problems with information 13 https://www.wongnai.com/restaurants/263268nJ-อาหารตามสั่ง-เสนานิคม-1
11. Example of problems with information 14 https://www.wongnai.com/restaurants/263268nJ-อาหารตามสั่ง-เสนานิคม-1
12. Example: on UI Google Maps (~2015 version)
13. Example: Bing Maps (~2015 version)
14. Bing Maps VS Google Maps Bing has more funtions? Bing Google
15. Bing Maps VS Google Maps Bing has more funtions? Bing Google
16. Bing Maps VS Google Maps Bing has more funtions? Bing Google
17. Bing Maps VS Google Maps Bing has more funtions? Bing Google
18. Information on a web page Information design - Wikipedia https://en.wikipedia.org/wiki/Information_design Information design is the practice of presenting information in a way that fosters efficient and effective understanding of it. The term has come to be used specifically for graphic design for displaying information effectively, rather than just attractively or for artistic expression. History · Early examples · Applications · Simplicity Information Design | Coursera https://www.coursera.org/learn/infodesign Information Design from University of California, San Diego. A blank canvas is full of possibility. If you have an idea for a user experience, how do you turn it into ... What is information design | What is information design www.infodesign.org.uk/What-is-information-design/what-is-information-design Modern life is saturated with complex information and data. For information to have impact, it must be easy to find, simple to use, and instantly understandable. What is Information Design? – Online-learning.com https://online-learning.com/information-design/ Information Designers facilitate the delivery of information by translating complex information into information that users can easily read and understand. The field of Information Design includes multidisciplinary skills in graphic design, writing, instructional design, and user experience. Information Design: The Understanding Discipline - Boxes and Arrows 21 Information design Field of study Information design is the practice of presenting information in a way that fosters efficient and effective understanding of it. Wikipedia
19. On the flip side 22
20. Information Grouping & Information Hierarchy 23 https://technet.microsoft.com/en-us/library/dn832142.aspx
21. Let’s try! - Activity 2 (5 mins) จัดของลงตะกร้า สมมุติว่าเพื่อนคุณต้องการความช่วยเหลือในการจัด ห้อง โดยห้องเพื่อนเต็มไปด้วยสิ่งของประหลาด คุณต้องการช่วยเพื่อนโดยจัดสิ่งของต่างๆ เก็บลงใน ตะกร้าที่เพื่อนมีในห้อง ซึ่งตะกร้าแต่ละใบ เพื่อนคุณ ได้แปะชื่อไว้ให้แล้ว
22. Let’s try! แต่ละกลุ่ม ขอตัวแทน 1 คน เพื่อท าหน้าที่เป็นเพื่อนของคุณ โดยตอนนี้ขอให้เพื่อนออกจากห้องนี้ไปก่อน เมื่อคนในกลุ่มจัดของลง ตะกร้าเสร็จ เพื่อนจะกลับมาท าหน้าที่ user test หาของในตะกร้า อีก 5 นาทีพบกันใหม่
23. กำรเรียน ของโปรด อุปกรณ์ท ำงำน อื่นๆ ห้องครัว ใช้ไฟฟ้ำ 1 2 3 4 5 6
24. Let’s try! (5 mins) ให้แต่ละกลุ่ม พยายามจัดของแต่ละชิ้น ลงไปในตะกร้าที่คิดว่าเหมาะสม ที่สุดที่มันควรอยู่
25. Let’s try! ตอนนี้ให้คนที่เป็น user กลับมาในกลุ่ม ขั้นต่อไป ผมจะค่อยๆ บอกชื่อสิ่งของที่ละชิ้น และให้ user ลองทายว่า ของชิ้นนี้ถูกเก็บอยู่ในตะกร้าใบไหน ถ้าทายถูก ได้ 1 คะแนน ทายผิด ได้ 0 คะแนน ? ? ?
26. Tamagotchi รุ่นแรก
27. ตุ๊กตำหมียัดนุ่น
28. แม่เหล็กติดตู้เย็นหนีบกระดำษ ลำยงิงักคุมะ
29. ตุ๊กตำลูกเทพ ที่ให้โชคเรื่อง กำรสอบ
30. มีดผ่ำตัด ของรูมเมทใช้ ตอนเรียนแพทย์ (ปัจจุบันใช้ปลอกมะม่วง)
31. Talking Dict
32. ที่นวดหัวผ่อนคลำยไฟฟ้ำ
33. CD ทำทำยังชุดแรก
34. What’s your score? ? /8
35. Why was it hard? 38
36. Tips ‘Others’, ‘Miscellaneous’, ‘อื่นๆ’ are terrible labels. Try avoiding them at all costs. 39
37. How to organize information 1. Top down 2. Bottom up 40
38. Organize Info – Top down Ex: Mind Mapping 41 http://www.krujongrak.com/mindmap_new/mindmap_thailand4_0.html
39. Affinity Diagramming A bottom-up information organization method 42
40. Affinity (noun)  a spontaneous or natural liking or sympathy for someone or something.  a similarity of characteristics suggesting a relationship, especially a resemblance in structure between animals, plants, or languages.  Syn. Have chemistry 43
42. 47 cat dog hamster car motorcycle plate spoon
43. 48 cat dog hamster car motorcycle plate dog cat hamster motorcycle car plate spoon Animals Vehicles Dining Grouping spoon
44. OR 49 cat dog hamster car motorcycle plate spoon dog cat hamster motorcycle car Inside my house Outside Grouping plate spoon
45. 50 cat dog hamster car motorcycle plate dog cat hamster motorcycle car Animals Vehicles Hierarchy Big Small Many people 1 person spoon
46. Let’s come back to our previous activity How should you group these? 51 เขียน php เขียน C++ ดีไซน์เสื้อยืด ดีไซน์เว็บ เขียนนิยาย
47. Like this? 52 เขียน php เขียน C++ ดีไซน์เสื้อยืด ดีไซน์เว็บ เขียนนิยาย
48. Or? 53 เขียน php เขียน C++ ดีไซน์เสื้อยืด ดีไซน์เว็บ เขียนนิยาย
49. Or? 54 เขียน C++ ดีไซน์เสื้อยืด ดีไซน์เว็บ เขียนนิยาย เขียน php
50. Or? 55 เขียน php เขียน C++ ดีไซน์เสื้อยืด ดีไซน์เว็บ เขียนนิยาย สาย สร้างเว็บ สายติสต์ๆ สายเทคนิคอล จ๋า
51. Tips Group by it’s meaning, don’t be fooled by the labels 56
52. Steps to affinity diagram: 1. Write info on post-its 2. Construct an affinity diagram 57
53. 1.Write info on post-its 58 Big Font One Point per note Your Name Self Explanatory
54. 2.Create an affinity diagram 59 Random on wall Move based on feeling Label each group
55. Activity 3 – Redo the basket (10 mins) Let’s try again with the basket. This time let’s ignore all the labels. Start by grouping items that you feel ‘related’, when the groups are formed, name them.
56. Tips Don’t get caught up with the basket labels from the previous activity. 61
57. How did you do? 62
58. Activity 4 – Redo the What you do. (15 mins) Combine you group with the next door group,. Now let’s try grouping all your 2 groups’ post-its together again! เขียน php เขียน C++
59. Please give us feedback! https://goo.gl/KLDUyj
60. Thank You! 65 www.pruxus.com | hello@pruxus.com PRUXUS