Deconstructing RemindersGabriel Spitz

How do we think about the User-Interface in a Systematic way

User-Interface & User Experience

Scope

Conceptual Model

Activity Flow

Representation

Presentation

Usefulness

Ease of Learning

Efficiency

Effectiveness

Aesthetics

UI Design Components UI Design Criteria

Scope

Manage Lists

Reorder reminder

Manage Reminder Categories

Search

Sort

Navigate between lists

…

The set of Functions included in the UI

Conceptual Model

What is this UI looks like

Conceptual ModelWhat is this ?

Activity– Create Reminder

1

23

4

5

6

1. Select a Folder2. Click on “Add” Icon3. Enter Reminder name4. Click on ”Info” icon5. Enter Reminder date6. Click on the “done”

button

What are the steps to create a reminder?

Activity Flow

1

23

4

5

6

How are the steps organized spatially on the UI?

Representation

To Do List - Table Widget

Add Item – Button

Date Picker – Calendar

Show/Hide Pane – Button

Show/Hide Calendar – Button

Add List - Button

How do we represent the various functions in the UI

Presentation

To Do List – Like a Note Pad

Add Item – Black button with icon

Date Picker – Calendar

Show/Hide Pane – Black button with icon

Show/Hide Calendar – Black button with icon

Add List - Black button with icon

How do visualize the different elements in the UI

Homepage DeconstructedDemonstrate the User Perspective within the Business Goals

What is a Homepage

Sign post Indicates the “direction” the website will take me in

First impression Is it a serious site, is it a fun site…

Gateway to a site Provides links to different sections of the site

Homepage is like the rest area along the Internet Highway; You can zip through it or Stop and enjoy the facility

Effective Homepages are designed from a user perspective

Visitors Types & Questions/Needs

New userReturning

userAccidental

user

Where am IWhat do you do/ have

Let me contact you

Do I trust you

I just want to do it

Show me the latest

Help me decide

Should I stick around

Is this the correct site

How Do I… - Help

Role of the Homepage

ImpressPromoteInform

Effective Homepages

In order to get the user to:- Stay on the site- Explore its content- Buy or use its services

Great Homepage Design

Is Informative – tells the visitor What is the site/tool about What can the visitor do on the site with the tool What can the site/tool do for the visitor

Resonate with target audience Narrowly focused Speaks the language of visitors of interest

Has Compelling value-proposition Convince the user to stick around

Jessica Meher, (2013) HubSpot

Great Homepage Design

Is Usable Easy to navigate No interruptions Mobile optimized

Has Clear Primary and secondary Call-to-action (CTA) Free Trial, Schedule a demo, Buy now, learn more We want the user to dig deeper into the website and move

them further down the Purchas-funnel

Reflect current needs, problems, and questions of visitors

Great Homepage Design

Is Good design Use of layout Call-To-Action placement Use of whitespace Colors Fonts Etc.

Home Page Example

• Simple design with strong headline

• Feels secure, but easy to use

• Good CTA-Free! Get Started

• Clear supporting image

Home Page Example

• Simple and effective headline - Remember Everything

• Arranged into 3 clear benefits that jump out because of the rich green background

• Eye path leads us to the CTA – “Get Evernote, its free”

Home Page Example

• Great headline

• Placement of customers at the center

• Sign-up form directly on the homepage