How to design application that easy to use and understandable

1. “Usability”
Rawin Viruchpintu
Creative Technology Leader
Spriiing Telecom Co.,Ltd.
July 19, 2012

2. Outline
• How to make a good program
• Define “Usability”
• User Mind Checking
• Defect types
• Usability testing
• Warnings

3. Usability
• Usability is the ease of use and learn ability of
a human-made object.
http://en.wikipedia.org/wiki/Usability

4. How to make a good program
Analysis
Design
prototype
Program
Usability
test

5. Define “Usability” ?
• เหมาะที่จะใช้ในชีวิตจริง
• ง่ายที่จะเรียนรู้
• ง่ายที่จะจา
• เข้าใจได้ว่าระบบทาอะไร
• ตอบโจทย์ผู้ใช้
• ทางานได้อย่างมีประสิทธิภาพ

6. User Mind Checking
6 Apps
3 Screensx

19. Time for checking

20. Questions
• How many features in the first screen?
• What is the feature
that most users will use
And why?

21. Application Flow
Sign in
Sign up
Timeline
News
Post
Profile
Explorer
Select Filter Upload

22. Users don’t need to remember
application flow.
Is it easy enough
to understand?

23. Home
Time line
Chat
Notification
Groups
Location
Poke
Filter
Settings
Contact
Sign out
Groups
Chat
Pictures
Stories
Movies
Members
Setting
Details
…
add/edit/delete
Friends
Chat
Picture
Sound
Movie
Emoticons
Winks
Respriiing
Mention
…

24. Astrid Task/To-do List
1 - 5M users
4.5 stars
File Expert
1 - 5M users
4.5 stars
Angry Birds Space
10 - 50M users
4.5 stars
TweetDeck
1 - 5M users
4 stars
Facebook
100 - 500M users
3.5 stars
Instagram
10 - 50M users
4.5 stars
Last update: Google Play (July 18, 2012)

25. Application Flow Analysis

26. • Setting
• Play
• Movie
Play
Setting Movie

27. • Select scene
• Play
• Back
Play
Back
Select scene …

28. Play Play
Setting
Movie
Back
Select scene

29. Application Flow Analysis

30. Select Content
Post Friends Search Map
Select time line

31. View
Content
Home Explorer Post News
Refresh
Profile

32. User
Content
NextOptions #1
Options #2

33. Navigation
Leads
Flow

34. Facts
• There is about (minimum) 8 clicks
to post an image by using Instagram.
(Normally I use around 13 clicks)
• Clear & simple flow make user feel it is easy.

35. •ตอบโจทย์ผู้ใช้ (*)
•ง่ายที่จะเรียนรู้
•ง่ายที่จะจา (และพร้อมที่จะลืม)
• มีประสิทธิภาพที่จะใช้ในชีวิตจริง..
Recap “Usability”

36. Recap “Usability”
•??? (*)
•?????
•????
• ???????

37. Defect types
• Program errors
• Missing functionality
• Ease-of-use problems

38. Defect types
Ease-of-use problems
• ไม่รู้จะใช้ยังไง
• ไม่เป็นอย่างที่คิด
• หาไม่เจอ
• ยุ่งยาก ขั้นตอนเยอะมากเกินไป
• น่าราคาญ
• บางฟีเจอร์ user ไม่ได้ต้องการ
• Expert users หา missing function ได้

39. Usability test
• Log what happens
• Mock ups เพื่อประเมินผล
• ตะโกนถาม user (คิดดังๆ)
• เลือก real users จริงมาทดสอบ
• ตัด hint, help ดูวิธีการแก้ปัญหา
• วิเคราะห์ระบบโดยคนอื่น

40. Usability test: Measurement
Requirements & targets
• วัดว่า user แก้ปัญหาได้ในกี่ steps (เฉลี่ย)
• เวลาในแต่ละ step เท่าไหร่ ?
• แต่ละ step ที่นาน มีอะไรที่ทาสับสนได้บ้าง กดกี่ครั้ง ?
• Test แค่ไหนถึงจะพอ?
• ความพอใจหลังใช้
• ความถี่และระยะเวลาในการใช้งานจริง
• ให้คะแนนความเข้าใจระบบ

41. Warnings
• ความเป็นไปได้ทางเทคนิค
• ความเร็วในการตอบสนอง
• ความชอบส่วนตัวของ Stakeholder
• User เข้าใจได้ว่าระบบคือ? และทางานอย่างไร?

42. References
Book: User interface design – A software engineer perspective
Google Play

43. THANK YOU