Post on 16-Jul-2015
What is a product?
A PRODUCT is something that -
● serves a purpose
● does something for me
Product
This is a product I LOVE: AirDroid
What is a productthat you LOVE?
WHY?
Building a Product that users will LOVE
Front End Engineer
www.green-red.com
E. M. Yeaseenur Rahman TAHIN@tahins
3 reasons to LOVE a product
○ Functionalities
○ User Interface (UI)
○ User eXperience (UX)
UI
UI answers 3 “HOW” questions
○ How it looks
○ How it is understood
○ How it works
Evolution of UI
VisiCalc - 1st spreadsheet program
Apple Lisa - 1st OS with GUI
Windows UI
Widgets
Skeuomorphic Design
Modern UI
Material Design
15 Laws of UI
Keep things clearto your user
Law of Clarity
1
Remove everything thatcan be removed from the UI
Law of Cleanliness
2
New user?Give him a hug tour
Law of Product Tour
3
Autoplay audio/video
Don’t embarrass user or
block them from content
Law of Not Interrupting
4
Provide feedbackwhen necessary
Law of Feedback
5
This is a button
This is not a button
This is important but not clickable
This is not a button
Don’t do anything,users won’t expect
Law of Not Surprising
6
If you want your user to dosomething -
Just Ask
Law of Guided Action
7
Show helpful infowhen & where needed
Law of Being Helpful (inline)
8
Users will make mistakesForgive them
Law of Forgiveness
9
Change your name: Google+
Change your name: Facebook (!!!)
Switching between page and profile
Provide the right optionwhen & where needed
Law of Context
10
What are the primary actions here?
What are the primary actions here?
What are the primary actions here?
What are the primary actions here?
Not more than 2 primary actions per screen
Put primary actionsfront and center
Law of Primary Action
11
How do you Log Out?
Zoom into the corner
Here it is
Put secondary actionsin secondary place
Law of Secondary Action
12
Whose site is that?
Whose site is that?
What makes it look consistent?
○ Logo
○ Color
○ Fonts
○ Layout
What about this? www.theworldsworstwebsiteever.com
Make users familiarwith you
Law of Consistency
13
Which brands come to your mind?
Using color to
Which emails are unread here?
Picture says 1000 wordsColor says 1000 pictures
Law of Using Color
14
How do you open this door?
Google Now
Serve user beforethey take action
Law of Invisible UI
15
UX
5 Points toRemember
Think FromDay 1
1
Desktop, Tablet& Mobile are different
2
COOLis not always useful
3
More is Goodbut
Less is More
4
Weather widget
Profile
Thermostat
(Proper)Whitespace is Good
5
Which one looks better? Why?
Too much whitespace!!!
Testing UXbecause you are not everyone
Usability Test
Become a User
Sibling Test
A/B Test
Use Tools
Thanks