Before you Design

Swapnil and Ankur talked about the principles of interaction design including basics and significance of design and designing keeping end-users in mind during Ncell App Camp 2015.

Transcript

1. Before You Design Your free-pass to win competition and user* *conditions apply
2. Condition 1: Flow Ankur Sharma Co-Founder/UX Design Expresiv Studios
4. HOW MUCH WILL IT TAKE FOR YOU TO QUIT?
5. YOU KNOW NOTHING
6. YOU HAVE A MILLION $$$ IDEA But who actually has your million $$$ ?
7. DO THEY NEED YOUR IDEA OR YOUR APP?
8. HOW ARE THEY WORKING AROUND THEN?
9. FASTER BETTER CHEAPER
10. WHO WOULD YOU BLAME IF YOU FAIL?
11. FINDING MR. X
12. MR. X IS THE EVERYDAY GUY. HE COULD BE THERE RIGHT BEHIND YOU.
13. MR.X WON’T CHANGE HIMSELF FOR YOUR APP. CHANGE YOUR APP.
14. KILL MR. X END OF STORY
16. WEAR MR. X’S SHOES HOW WOULD HE DO IT?
17. LET IT FLOW, LET IT FLOW.
18. DON’T YET DESIGN 
 THE APP. DESIGN THE FLOW.
19. SIMPLIFY THE FLOW.
20. ALLOW CLOSURES.
21. LET THE USER KNOW WHERE THE BOAT IS.
22. LET THE USER STEER THEIR OWN BOAT.
23. HERE’S YOUR 2-MINUTE NOODLES
24. INSTANT UNDERSTANDING
25. UI/UX IS LIKE A JOKE. IT’S ALREADY NOT WORKING IF YOU HAVE TO EXPLAIN IT.
26. ROUGH PAPER: PROTOTYPING
27. RISE OF THE PROTOTYPES
28. WIZARD OF OZ MODEL
29. FAKE IT TILL YOU MAKE IT
30. NOT A SINGLE LINE OF CODE IS REQUIRED.
31. TOOLS
32. GREAT TOOLS FOR YOU Sketch Principle
33. LOVE AT FIRST SIGHT.
34. EXPERIENCE BEFORE FEATURE
35. ATTENTION SPAN 13 9 8 3 2000 2013
36. FLUID DYNAMICS OF UI/UX
37. GRATIFICATION & DELIGHTFULNESS
39. NO, WAIT! ONE MORE THING…
40. Condition 2: Face Swapnil Acharya Co-Founder/UI Design Expresiv Studios
41. Lets play a colour game.
42. You call your friends and relatives with this.
43. You watch videos with this.
44. You read latest news with this.
45. You write short 140 letter status with this.
46. Nepal’s largest telecom company
47. COLOURS
48. WORK ON PSYCHO- NEURAL LEVEL ADHERE TO BRANDING INTERPRET ACTIONS AND STAGES REFLECT UNIQUENESS ATTACH TO AN EMOTION NATURAL SYMBOLISM COLOURS
49. Use colours to guide users with actions they’re required to complete.
50. The psychology of color Blue.
51. Oh, snap!
52. Green is unpredictable!
53. Red: Excitement all over!
54. White: Clean vs Sparse
55. COPY
56. Copy is not typography.
59. Copy is the most “human” thing in the entire software.
60. BAD COPY: ProjectManager App - The best way to manage your project. GOOD COPY: Asana - Move work forward. Asana is the easiest way for teams to track their work—and get results.
61. Make copy enticing, exciting and welcoming.
62. Make copy interesting, funny and that instantly connects to the user.
63. Keep copy clear, concise and tell exactly what’s needed and what to expect next.
64. Error? Tell them what happened, how did it happen and what they can do next.
65. TYPOGRAPHY
66. Image and Brand
67. Legibility and Readability
69. TEST: Read the following sentence. I will go Illam at Ipm.
70. TEST: Are the letters easier to read now? I will go Illam at 1pm.
71. If in doubt, use platform- specific fonts. iOS9 San Francisco iOS 8 and below Helvetica Neue Android Roboto Windows Phone Segoe
72. Android vs iOS
73. IMAGERY
76. Photos communicate brand, message and purpose of the app and connect to the intended demography.
77. Establish trust, build credibility and reinforce visual memory.
78. WebX Viber Pick your target audience.
79. The mighty DP, aka Profile Picture
80. MOTION
81. Humans cannot interact with things that are dead. Dead as in inanimate, still, lack of life.
82. Animation adds natural rhythm and it gives purpose and context to interactivity.
83. Mimic how things behave in real life.
84. Ease the waiting times.
85. Delight ‘em with little details.
86. ICONOGRAPHY
87. Icons help establish brand and determine first impressions. Icons helps enhance experience for people who don’t or cannot read.
88. Designed for crisis situations. Designed for users with low literacy.
89. Icons break the language barrier.
90. Icons may have different style but they have universal meaning.
91. Follow the universal norm Search Results Search Results
92. CLARITY
93. • Tell your users upfront what they need to do and what they can expect subsequently • Strengthen the impact of the message • Promote simplicity, elegance, class and refinement Clarity
94. CONSISTENCY
95. • If you set your rules in the beginning, make sure you keep them till the end • Applies to layout, colour, images, icons, typography and text • Platform may have a style guide - Follow it! Consistency
96. • Being consistent is not ‘unimaginative’ • Inconsistency makes life hard for readers • Showing off a hundred typefaces/icons won’t impress anybody! Consistent = not changing frequently Consistent use of icons, colours, typefaces Consistent positioning of navbars, menus etc
97. CONTRAST
98. • Support skimming and tell things apart • Lead the user’s eye to next action • Help distinguish important items • Help quick decision- making for users Contrast
99. Poor Contrast Reasonable Contrast Good Contrast Maximum Contrast
100. ALIGNMENT & ORGANISATION
101. • are (hidden) horizontal and vertical lines to help locate components • Align related things • Group items logically Grids
102. The Rule of Thirds is a theory dictating how an visual should be composed in order to create an aesthetically pleasing result. The principle involves splitting an image into nine equal parts and aligning the objects to the intersections of the points. Rule of Thirds
103. Fibonacci numbers follow a 1:1.61 ratio - this is what we refer to as the Golden Ratio, and as it forms such a common sight in nature, it feels pleasing to the eye when we use this same ratio in our design work. Golden Ratio
104. • Items close together appear to have a relationship • Distance implies no relationship Proximity
105. • Our eyes/brain logically group together visual • elements that are similar to one another. Similarity
106. • When an object is incomplete, but enough of the object is indicated, the mind perceives the object to be whole by mentally filling the information. Closure
107. • Our eyes/brain logically group together visual elements that approximate a closed shape, to form that closed shape. Continuity
108. • Our mind automatically maps layers and levels among objects laid on top of one another as if in a 3D space. Figure Ground
109. NEXT STEPS
110. https://developer.android.com/design/ https://developer.apple.com/library/ios/ documentation/userexperience/ conceptual/mobilehig/ http://dev.windows.com/en-us/design Read and understand the Human Interaction Guidelines laid down by popular platforms.
111. Break a few things.
112. Keep Learning Books, tutorials, online galleries, podcasts, etc.
113. Make something delightful.
114. Thank You