Upload
elliot-harmond
View
217
Download
0
Tags:
Embed Size (px)
Citation preview
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