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

http://www.youtube.com/watch?v=ozLaklIFWUI

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