Design Simple but Powerful application

Simple and Powerful
Ver. 0.92
Jim Liang Terry Wang

Part 1: About Simple and Powerful
Part 2: Deep Dive – How to address the challenges?

Users hate complexity
We Simplicity

If ease of use was the only valid criterion, people would stick to
tricycles and never try bicycles.
But simple is not the only one criterion
Dr. Douglas Engelbart
Inventor of Mouse
It‘s much harder to learn bicycles than tricycles. However, once user learned how to ride it, it will offer
user huge benefit in terms of productivity and efficiency.
To drive fast, which one is better?

People want powerful products
Powerful Product

Powerful products have a lot of functionalities and information,
and usually it’s difficult to use, build and maintain.
But powerful usually means complicated

Can we have both?
There is a natural tension between the two.
POWERFULSIMPLE

Different product types have different focus
Consumer products tend to compete on ease of use while
enterprise products still compete on features and functions.
Simple
Powerful

Different focus based on target market
Adobe Photoshop
• Rich functionalities
• High learning curve
• Mainly aimed at professional users
Professional Application
Instagram
• Limited functionalities
• Easy to learn and use
• Aimed at non-professional users

Extremely complex UI works really well in extreme cases
Figure: Airplane cockpit

Even in the same application, priorities are different.
Different modules/tasks have different priorities
Routine & Repetitive tasks
Efficiency is the focus
Occasional Tasks
Ease of learning is the focus

• Complex requirements (edge cases, invalid requirements)
• Complicated processes and task flows
• Many roles involved in the business scenarios
• Many dependencies between functions and processes
• Feature creeps 
• Bad solution architecture
• Lousy UI design
• Messy technical architecture
• Technical constraints
• Conflicting interests in development team
• Compromise in the team
• etc…
Design&Implementation
What factors could result in complexity?
Requirement

Balancing the conflicts
You can achieve both power and simplicity through carefully
balanced feature selection and presentation1. 
1 Source: Powerful and Simple, Microsoft
Art of Balance

Case Study: Simplify the control
Source: Secrets of Simplicity: rules for being simple and usable
How to simplify the remote control?

Remove features

Hide features

Group features

Source: Secrets of Simplicity: rules for being simple and usable
Displace features

Part 2 Table of contents
REQUIREMENT
• Requirements are crucial
• Tips for avoiding feature creep
DESIGN
• Solution architecture design
• UX design
• Technical design

How many requirements are really valid?
45% of delivered features are never used.1
Source: Johnson, J. 2002. Keynote speech, XP 2002, Sardinia,
Italy.
45%
55%

Crappy requirements lead to crappy products
Rubbish Out
Long time development
Rubbish In

Tips for avoiding features creep
• Drive design by users’ goals
• Say No by default
• Validate the requirements early
• Optimize the requirements
• Prioritize the requirements
• Focus on core scenarios
• Cut features
• Think big, Start small
• Address diverse requirements via Layering

Drive design by users' goals
• Start the design from understanding and analyzing user's needs.
• Feature list can be a good approach for tracking requirements
and product management. However, don't use it as the starting
point for design.
• Avoid “me too” strategy.
Understand users in the context
▪ Common and exceptional tasks
▪ Work environments and work flows
▪ Tools and artifacts
▪ Social interdependencies and communication patterns
▪ Common pain points
▪ Preferences
▪ Unfulfilled needs
▪ Information needs
Contextual Design

Say No by default
• New features almost always mean more UI, more code and
more bugs.
• When you say yes, you say no to a lot of other things.
• A feature must work very hard to prove its value.
When it comes to feature requests, the customer is not always
right. If we added every single thing our customers
requested, no one would want our products.
– Getting Real, 37signals

Validate requirements early
IT managers, CIO, Marketing, etc
End UserProxies
Talk to the real users

• Paper Prototypes
• Usability Testing
• Site Visit, etc
The approaches for validation

• Simple processes lead to simple design and implementation. Try
to optimize the processes first before design.
• A well-thought solution includes more than the software. People,
organization, processes should all be considered.
Optimize business processes
Streamline Task flow

Prioritize use cases by Importance of Scenarios & Frequency of Use
Prioritize requirements
Importance
Frequency of use
1x/Day1x/Week1x/Month1x/0.5year1x/Year
1 2
3
4
6 7
8
5 Use Cases Example:
1. Create new Cash Accounts
2. Enter expenses (excluding
ERM)
3. Enter AP Cash Payments
4. Enter revenues
5. Enter AR Cash Payments
6. Enter incoming Cash Transfers
7. Enter outgoing Cash Transfers
8. Cash Transfer Cash Box to
Cash Box

Focus on core scenarios
• Focus on the essentials. (80/20 rule)
• Design for the common case 1
• Don't let edge cases jeopardize your system design.
1 Source: Designing with the Mind in Mind, Jeff Johnson

Cut features
• The simplest way to achieve simplicity is through thoughtful
reduction
1
.
• Make hard decisions instead of making everything optional or
configurable.
1. Source: The Laws of Simplicity, John Maeda
Take whatever you think your product should
be and cut it in half. Pare features down until
you’re left with only the most essential ones. Then
do it again.
– Getting Real, 37signals

Same intentionally left out a rather common
feature in social networking apps — adding
friends — which seems essential from the
first look.
This decision made their product simpler
from both development and users point of
view. Yet the discovery model is quite
addictive and powerful.
Example of thoughtful deduction

Start to build a skinny system, add muscles in later steps1
.
Think big, start small
1 Source: Be Smart! by Ivar Jacobson
Skinny System Full Fledged System

WeChat is a perfect example of
thinking big and starting small. They
wanted to build a platform/ecosystem
to connect everything. Yet the first
version is only an IM that runs only on
mobile phones.
Example of “ Think big and start small ”

Improve the product iteratively
Source of Diagram: MSF, Microsoft
Q: How to know what the essential requirements are?
A: Ship the product and listen to what customers say.

Personalization
Let end users adapt the UI
Extension
Enhance functions by Rules, Scripts,
Templates, Formula, Configuration by
IT admin or power user
Customization
Customize features by 3rd party
partners or customers
themselves
Platform/Core
Pre-ship the core features
and framework by software
vendor *
User-friendly
Flexibility
and cost for
change
Help users adapt as the business changes and grows
Code
Code/API
Rule, Script,
Template,
Configuration, etc
UI
* Platform strategy might be only suitable for big players.
high
low high
low
Address diverse requirements via Layering

Case Study: Microsoft Excel
Why is Microsoft Excel widely used in enterprise?
1. Flexible to meet various needs.
2. User can have powerful capability even without
coding.
3. Efficient tools to enhance productivities.

Solution Architecture Design
1. Automation
2. Balance the workload between users
3. Integration
4. Offer collaboration capability
5. Leverage intelligence
6. Simplify the solution holistically

Manual Data Entry RFID
No UI needed to input data!
Bar-Code
Source of concept : Dan Rosenberg, SAP
The best UI is no UI
Automation

Workflow reduces human efforts on routine tasks.
Automation – Workflow
Figure: Oracle Workflow Builder

Automation – Notification
Actionable notifications has become a standard mechanism in modern systems.

Setting up a rule for once and it will do the work automatically afterwards.
Automation – Rules
Figure: Microsoft Outlook

Automation – Batch action
In Adobe Photoshop, people can record actions and re-apply
them to a batch of photos.

Automation – Template
In Zoho, people can create different layouts for invoices based
on system-provided templates.

Balance the workload between users.
• Centralized management. e.g. system configuration, mass data
management
• Decentralized management. e.g. employee self-service, interactive
dashboard
How to distribute the tasks ?
Balance the workload

Balance the workload – Decentralized approach
By building a self-service center and letting employees to do certain
activities by themselves increases the productivity of the organization.
Otherwise, IT/admin will become bottleneck.

Sometimes it’s very hard to get rid of complexity, you
can think about how to shift the complexity to a few
power users/IT Admin when you design the solution/
UI. Therefore, the UI for end users will be much
simpler.
Shift the complexity to advanced users
Balance the workload – Centralized approach

Integration
Letting systems talk to each other eliminates the needs for human
input. Less human intervention also means less error-prone.
A
B
C

Continuity in iOS 8 bridges the workflow gap between multiple Apple devices.
Integrating devices

Integrating services
IFTTT lets people automate routine tasks by connecting different web services.

Github (Open source) makes it really simple for a group of people to work
on a problem collaboratively.
By providing a simple platform, Github allows people to achieve amazing
things.
Offer collaboration capability

Offer monitoring capability
• Exception-based Working Model  
This working model reduces user’s workload. User just
focuses on the exception/Alerts from system. 
• Facilitate visibility and insight through
Dashboard, Embedded Analytics, etc.  
Therefore, user can easily monitor KPI, workload,
overdue tasks, status, process transparency, etc. 
• Provide Real-time monitoring if
feasible 
Real-time capability can help user get the information
immediately without waiting. Google Real-Time
Analytics is a good example.
Example: Google Analytics (Real-Time)
Example: SAP Business ByDesign

Don’t just focus on the UI. The hidden side is also key to making a
simple and powerful system. For example:
1. New technology
2. Business Intelligence
1. Query, Reporting and Analysis
2. Scorecards, Dashboard and Real-time monitoring
3. Text mining
4. Data mining
3. Collective Wisdom
1. User’s voting, review, recommendation
2. Expert’s view
3. Co-creation (e.g., Wiki)
Leverage intelligence

Siri uses technology to eliminate UIs in all places.
Technology simplifies the solution

Touch ID saves the effort of entering
passcode each time the user wants
to unlock the phone.
Technology simplifies the solution

Business Intelligence let you identify your problem easily
Figure: Mixpanel funnel analysis

Let people help each other
User ratings on imdb.com User comments on amazon.com

Simplify solution from a holistic view
Not only easy to use, but also:
• Easy to buy
• Easy to maintain (e.g., SaaS)
• Easy to upgrade (e.g. iPhone)
• Easy to access (e.g. mobile, web, desktop applications)

Part 2 Table of contents
REQUIREMENT
• Requirements are crucial
• Tips for avoiding feature creep
DESIGN
• Solution architecture design
• UX design
• Know your users
• Basic UI design framework
• Design principles and tips
• Technical design

Puts users’ needs at the center of design
We are not the users!
Product managers, designers and developers
are not the real users.

User’s psychological characteristics
• Usually users are impatient and in a hurry
• Users want to get job done as quick as possible
• Goal-oriented ( esp. Users of Business Applications)
• Some users are hesitant and afraid of disrupting the system
• Users of business software do not want to look stupid
• For users of business application, efficiency is very important. Meanwhile, high
learning curve will frustrate users
• User has limited capacity to deal with the information at one time. (Magic number
seven: 7±2 ). So you shall reduce the user’s cognitive load. Recognition is easier
than remembering (recall).
• Users prefer familiar path; Users don’t want to explore new ones1
• Learning from experience and performing learned actions are Easy 2;
1 .2 Source: Designing with the Mind in Mind, Jeff Johnson

Design for different user types
In many cases UI complexity is resulted from one single universal
UI for everyone (all customers and all types of users). Instead, think
about using different UI to satisfy different needs.
Casual User
Professional User
Administrator / Power User / Key User
Different user types

Users will not always remain as beginner
Easy to Learn Efficiency
The learnability (easy to learn) is often in conflict with the
efficiency. How to balance them is a constant challenge to
designers.
Designer’s Dilemma
Which one is more important?
?

The experience level of people performing an activity tends, like most population distributions, to
follow the classic statistical bell curve. Although beginners quickly improve to become
intermediates, they seldom go on to become experts.
Intermediates are the mainstream
Most users are intermediates.
Source: About the face 3, Alan Cooper

The elements of user experience
Source: The Elements of User Experience – Jesse James Garrett

Simplicity depends on how you organize information into
meaningful chunks/units.
POP Model
POP UI Design Model  
Prioritize, Organize, Present
Prioritize
Organize
Present
UI DESIGN

Prioritize Information
Prioritize
Organize
Present
UI DESIGN
If everything is important, nothing is.
1. All elements/tasks are not equally important.
2. Differentiate them based on importance and
frequency of use.
3. Emphasize the important ones and remove
the irrelevant.

Organize Information
Prioritize
Organize
Present
UI DESIGN
Organize the information in a way that is logical
and meet user’s expectation.
Information architecture is commonly used to
describe the structure/shape of the information.

Figure: Information architecture of the library of University Duke

Divide each difficulty into as many parts as is feasible and
necessary to resolve it.
Rene Descartes
Philosopher, mathematician and writer
Jef Raskin
HCI expert, starter of the Macintosh project
Most human beings can only concentrate on one thing at a time.
Note: Separation can make complex tasks feel simple. However, it could result in more clicks and usually
less efficiency, even discoverability issues.
Organize Information – Separation

Wizard breaks a complex task into several steps.
Each step is presented in a separate screen.
Figure: Windows new network connection wizard

Information on the same screen can be further organized into logical groups.
Figure: AGF website

Present information
1. Create a clear visual hierarchy.
2. Use the right UI element/pattern to present
information depending on the usage
scenarios. For example:
• Text
• Picture, video, diagram, illustration, sound
• Table
• Chart
• Form
• Tab
• Toolbar
• Accordion
• Carousel
• …
Prioritize
Organize
Present
UI DESIGN

How to create visual hierarchy
Group Alignment
Contrast Repetition

Figure: ia.net Figure: basecamp.com

Source: Introduction to Usability, Nielsen Norman Group
Learnability Efficiency Memorability Errors Satisfaction
Usability is defined by 5 quality components:

Learnability Efficiency Memorability Errors Satisfaction

Ways to improve software learnability
1. Omit needless information
2. Make it quick to scan and find
3. Create clear visual hierarchy
4. Tell the user where they are
5. Progressive disclosure
6. Direct manipulation
7. Visualize
8. Provide guidance
9. Provide feedback
10. Be consistent

Omit needless information
Omit needless words. Vigorous writing is concise. A sentence should
contain no unnecessary words, a paragraph no unnecessary sentences,
for the same reason that a drawing should have no unnecessary lines
and a machine no unnecessary parts.
— The Elements of Style
No matter how cool your interface, less of it would be better.
Alan Cooper
Father of Visual Basic, Author of About Face

Reduce the number of choices presented at any given time.1
1. Source: Office 2007 Design Tenets, Microsoft
2. Source: The Paradox of Choice, Barry Schwartz
We should minimize the amount of choices a user has to select from. Removing
any unnecessary pages, links, buttons or selections will make your designs much
more effective and give less opportunities to users to make mistakes.
The Paradox of Choice2
The more choices a person is
presented with, the harder it is for
them to choose.
Reduce the number of choices

Make it quick to scan and find
• Usually users are in a hurry.
• We don’t read pages. We SCAN them 1.
• Break up pages into clearly deﬁned areas 
• Use scannable layout 
• Provide clear visual clues 
1. Source: Don’t make me think, Steve Krug

Create a Clear Visual Hierarchy
Organize and prioritize the contents
of a page by using size, prominence,
and content relationships. Let’s look
at these relationships more closely.
The more important a headline is,
the larger its font size should be.
Big bold headlines help to grab the
user’s attention as they scan the
Web page. The more important the
headline or content, the higher up
the page it should be placed. The
most important or popular content
should always be positioned
prominently near the top of the page,
so users can view it without having to
scroll too far. Group similar content
types by displaying the content in a
similar visual style, or in a clearly
defined area.
Create a clear visual hierarchy
Create a Clear Visual Hierarchy
Organize and prioritize the contents of a page by
using size, prominence, and content relationships.
Let’s look at these relationships more closely.
• Size. The more important a headline is, the larger
its font size should be. Big bold headlines help to
grab the user’s attention as they scan the Web
page.
• Prominence. The more important the headline or
content, the higher up the page it should be
placed. The most important or popular content
should always be positioned prominently near the
top of the page, so users can view it without
having to scroll too far.
• Content Relationship. Group similar content
types by displaying the content in a similar visual
style, or in a clearly defined area.
Clear visual hierarchy makes it easy to scan and find
the information user wants.

Remove visual clutter
The blue boxes above add no information but clutter. Below design
communicates the same amount of information with less visual elements.

White space can give the design breathing room. Used correctly, it not only makes
the content more legible/easier to read, but also makes the page elegant.
Use white space

Tell the user where they are
Breadcrumb tells the user where she is in the site’s hierarchical
structure so that she can easily navigate to other parts.

Progressive Disclosure
Progressive Disclosure is a simple yet powerful idea:
1. Initially, show users only a few of the most important options.
2. Offer a larger set of specialized options upon request.1
1. Source: Progressive Disclosure, Nielsen Norman Group
2. Source: Top Guidelines Violations, Microsoft
Don’t hide commonly used items, because users might not find them. But
make sure whatever is hidden has value.2

LinkedIn shows more filters upon user’s request for people search.

Initial state Mouse hover Mouse click
Figure: Google Plus

Direct manipulation
You can use direct manipulation to let users interact directly with objects using their
mouse, instead of indirectly with the keyboard, dialog boxes, or menus.1
In this example user has to control
indirectly the UI elements through
pressing the physical keys
In this example user directly manipulates
the objects on the screen
1. Source : Designing with Windows Presentation Foundation, Microsoft

Visualize
Image: http://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words
A picture is worth 1000 words

Microsoft Windows 3.x File Manager
Microsoft Windows 7 File Manager
Visualize — Numbers

Metaphors can make an application self-explanatory because they allow
users to transfer existing knowledge to the application. This simplifies
learning, relearning, and using an application.1
Visualize — Icons
Delete
Print
Calendar
1 Source: Simplifying for Usability, SAP

Users don’t need to think what the chart or font is when they can see
them before selecting them.
Visualize — Previews

Visualize — Illustrations
Basecamp uses these illustrations to explain what their products do.
Image: basecamp.com

Visualize — Animations
Show instead of explain. You can use animations and transitions to
show relationships, causes, and effects. This technique is best used to
provide information that would otherwise require text to explain or might
be missed by users.

Guide users – standard help  
Knowing how to perform tasks reduces its inherent complexity.
• Standard Help is not suitable for the beginners. 
Standard online help is a poor tool for providing such beginner assistance. …its primary utility is as a reference,
and beginners don’t need reference information; they need overview information, such as a guided tour.
1
• User shall be able to easily dismiss the help. 
To get beginners to a state of intermediacy requires extra help from the program, but this extra help will get in
their way as soon as they become intermediates. This means that whatever extra help you provide, it must not
be fixed into the interface. It must know how to go away when its services are no longer required.
2
• Don’t use help as the means to offset poor design.  
If user has to resort to help document, rethink your design.
1. Source: About the face 3, Alan Cooper
2. Source: About the face 3, Alan Cooper

Guide users – Demo / tutorial
Very few people take the time to read instructions.
Figure: pixate.com

Guide users – Hint or Instruction
Terminology and on-screen text should:
1. Use user-focused language.
2. Avoid jargon.
3. Avoid abbreviation.
4. We learn faster when vocabulary is task-focused, familiar, and consistent1
5. Keep the text short and simple. Omit needless words.
6. Design text for scanning, not immersive reading2
7. Shall be self-explanatory.
1. Source : Designing with Mind in Mind, Jeff Johnson
2. Source : How to Design a Great User Experience, Microsoft
Get rid of half the words on each page, then get rid of half of what’s left.
— Krug’s third law of usability

Guide users – Blank Slate
Another aspect of the Mac OS X UI that I think has been tremendously
influenced by [Steve] Jobs is the setup and first-run experience. I think
Jobs is keenly aware of the importance of first impressions... I think Jobs
looks at the first-run experience and thinks, it may only be one-thousandth
of a user's overall experience with the machine, but it's the most
important one-thousandth, because it's the first one-thousandth, and it
sets their expectations and initial impression.
— John Gruber, author and web developer

Guide users – Blank Slate
Basecamp uses the blank slate to briefly explain what the
product does and encourages the user to add a project.

Guide users – On-screen text
In general, too much on-screen
text is a bad practice because
users tend to ignore them and
they simply add visual noise.
In some rare cases, however,
they’re unavoidable.

Tooltip is a useful technique to
simplify the UI. It shows
information upon user’s request
while keeping the UI free of
clutter by default.
Guide users – Tooltips

Guide users – Thoughtful defaults
Setting a default value that
works for most users in most
cases is simple and safe. Most
users are lazy and they won’t
change it at all.

Provide feedback
When user performs an action, the system should respond with visual
changes (and/or other changes) to tell the users that something is
happening, has happened or could happen.
1. Instant feedback (so that users know whether the action
succeeded or failed)
2. Modeless feedback (so it doesn’t block other actions)
Microsoft PowerPoint provides a modeless feedback while saving a document.

Be consistent
Consistency makes an application easier to learn and use.
Note: Consistency is a guiding principle, not the ultimate goal.

About efficiency
Usually intermediate and advanced users ask for efficiency. One must
balance the needs with learnability.
1. Leverage human habits
2. Facilitate users
• Fitts's Law
• Keyboard shortcuts
• Drag and drop
• Command line UI
• Batch actions
• Auto-suggest
• Inline editing

Leverage human habits
Humans form habits after repetition; it is our natural tendency to
learn tasks to the point where they become automatic.
Jef Raskin
HCI expert, starter of the Macintosh project
Rule of thumb:
1. A stable system structure helps user form habits
2. Align with the habits that users already formed

Create a stable structure
Source: 1.Office 2007 design tenets, Microsoft
Give features a permanent home. Prefer consistent-location
UI over “smart” UI.1
In Mac OS X, no matter what app you use, the toolbar is always at the top of
the screen. Users don’t have to think where to find it.

Align with user’s habits
It’s important to follow the conventions that had formed in the UI
design history. Users are used to them. Violating them makes users
confusing and frustrating.
The primary action buttons are in different places on Mac OS and Windows.
(Mac on the right and Windows on the left). Be sure to follow this rules when
designing apps for these system.

Facilitate users — Fitts’s Law
Make clickable areas large so they are easy to click.
Basecamp makes sure users won’t miss the call-to-action button.

Facilitate users — Keyboard shortcuts (E.g. Ctrl C, Ctrl V)
Accelerators — unseen by the novice user —
may often speed up the interaction for the
expert user such that the system can cater to
both inexperienced and experienced users.
Allow users to tailor frequent actions.1
1. Source: 10 Usability Heuristics for User Interface Design, NNGroup

Facilitate users — Drag and Drop
Rich visual feedback is key to successful direct manipulation.

Facilitate users — Command Line UI
Users can type msconfig in Windows
command line to bring up System
Configuration window, which is hard to find if
looked for from the menu.
Users can type about:flags in the Chrome
address bar to bring up the configuration
window.

Facilitate users — Batch actions
Photoshop actions can improve
productivity for those who repeatedly
process pictures.

Facilitate users — Code completion
Xcode can suggest the right function names base on what
users type, which saves a lot of typing and reduces the mental
energy needed to remember these names.

Facilitate users — Auto suggest
As the user types input into a field, a drop-down menu of matching values is
displayed. When done right, the choice that best matches will be auto-
selected. The user can stop typing and accept the choice that has been
matched or choose a different value from the list.1
1. Source: Designing Web Interface, Bill Scott and Theresa

When the conditions of a rule is met, actions that are defined by the user will
be taken automatically.
Facilitate users — Script, rule, macro, formula

Adobe Acrobat Reader will display a thumbnail as user scroll to help user
quickly navigate through the pages.
Facilitate users — Content preview

Flickr inline editor let user focus on the screen and won’t break the task flow.
Facilitate users — Inline editing

Facilitate users — Provide different views
The Calendar app in iOS 8 provides different views to look at appointments.

mint.com allows users to consolidate key information
from different sources into one page.
Facilitate users — Consolidate information

Facilitate users — Search v.s. Browse
Both modes should be provided in applications.
• Browsing is a structured way to find information.
• Searching is a non-structured and more efficient way to
find information.

Facilitate users — Visual editor
Microsoft Visual Studio provides a UI editor for developers to create UI via
drag-n-drop. The snap lines help users to align elements. This is a simple
and powerful feature which makes the layout work really efficient.

Our capacity for processing information is limited
• Magical number 7 ± 2
• The activation of a information chunk is influenced by 3 different
factors: Practice, recency and context.
• Recognition rather than recall 1.
?

Bing has a link to the user’s search history. The link helps
users remember previous searches.
Make information more visible

When a user goes back to Amazon.com, the personalized
homepage includes a list of recently viewed items.

People can quickly open recent documents in Microsoft
PowerPoint. And the app will remember the last state too.

Auto-completion
In this design, people don’t have to remember the exact state names.

Reminder
Outlook will reminds people when a meeting is about to happen.

Before error happens
USER’S TASK FLOW
✕
Even better than good error messages is a careful design which
prevents a problem from occurring in the first place. Either
eliminate error-prone conditions or check for them and present users
with a confirmation option before they commit to the action.1

Error prevention
1. Expect users to make errors when designing screens
2. Try to anticipate where they will go wrong
3. Provide good default values
4. Provide warning
5. Provide preview before taking actions
6. Use constraint to prevent the error

Provide Warning
Alarm to warn against dangerous actions

Provide preview before taking the action
MS Office -Print Preview Adobe – Filter effect Preview

Use constraints to prevent error
The shape of the plugs are designed differently
to avoid mistake.
Disable functions if they don’t apply to current context to avoid mistake.

Tolerance for error
Double-cut auto key is
always right side up.
Clothing iron shuts off automatically
after 5 minutes of non-use.
Undo allows user to
correct mistakes without
penalty.
Google automatically corrects
mis-spelling words.

After error happens
USER’S TASK FLOW
✕
It’s an important time to explain to the users what happened and keep
them on your website/service.

Provide constructive feedback
• Don’t let user think it’s their fault
• Effective error messages inform users that a problem occurred, explain why it
happened, and provide a solution so users can fix the problem1.
1.Source: Error Messages, Microsoft

Make actions reversible
MindMeister takes it one step further to record all user
actions so they don’t need to worry about data loss and can
easily reverse.

Don’t forget the emotional needs
• Tap into emotions like anger, frustration, love, loneliness, fear, pride, lust, etc 1
• Simple and beautiful design that perform the function well can invoke a positive and
emotional response.
• Make it visually attractive.
Positive affect makes people more
tolerant of minor difficulties and more
flexible and creative in finding solutions.
Products designed for more relaxed,
pleasant occasions can enhance their
usability through pleasant, aesthetic
design. 2
1. Source of concept: Inspired, Marty Cagan
2 Source: Emotion & Design: Attractive things work better ,Don Norman

Hide internal complexity to users
• Obtaining simplicity while preserving power often requires
significant internal complexity.
• UI first. Don’t design UI to map with internal technical architecture.
• Changes should be easy.
• Separate presentation tier(UI) from logic tier and data tier

Performance, Scalability, Extensibility
• Performance and scalability are key.
• Offer the customer flexibility to customize the system. For example,
providing APIs.

Quality of code
• Functional correctness
• Clarity
• No duplication

ABOUT US
Jim Liang
Senior UX Designer, SAP
http://cn.linkedin.com/in/jimliang
Terry Wang
Senior UX Designer, Amazon
http://cn.linkedin.com/in/terrywang

Appendix
What does "Simple" Mean?
Source: Simplifying for Usability, SAP

Appendix
What does “Powerful” mean ?
Enabling
The application satisfies the needs of its target users, enabling them to perform tasks that they couldn't
otherwise do and achieve their goals effectively.
Efficient
The application enables users to perform tasks with a level of productivity and scale that wasn't possible
before.
Versatile
The application enables users to perform a wide range of tasks effectively in a variety of circumstances.
Direct
The application feels like it is directly helping users achieve their goals, instead of getting in the way or
requiring unnecessary steps. Features like shortcuts, keyboard access, and macros improve the sense of
directness.
Flexible
The application allows users complete, fine-grained control over their work.
Integrated
The application is well integrated with Microsoft® Windows®, allowing it to share data with other applications.
Advanced
The application has extraordinary, innovative, state-of-the-art features that are not found in competing
solutions.
Source: “Powerful and Simple” , Microsoft

References
Powerful and Simple, Microsoft 
http://msdn.microsoft.com/en-us/library/aa511332.aspx
Simplifying for Usability, SAP 
http://www.sapdesignguild.org/resources/simplification/index.htm
Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition, Steve Krug 
http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?
ie=UTF8&qid=1288002208&sr=8-1
Secrets of Simplicity: rules for being simple and usable ,Giles Colborne  
http://www.slideshare.net/cxpartners/secrets-of-simplicity
The Laws of Simplicity (Simplicity: Design, Technology, Business, Life), John Maeda 
http://www.amazon.com/Laws-Simplicity-Design-Technology-Business/dp/0262134721/ref=sr_1_1?
s=books&ie=UTF8&qid=1288002290&sr=1-1
7 Interface Design Techniques to Simplify and De-clutter Your Interfaces, Dmitry Fadeyev 
http://www.webdesignerdepot.com/2009/02/7-interface-design-techniques-to-simplify-and-de-clutter-your-interfaces/
About the face 3, Alan Cooper , Robert Reimann, David Cronin 
http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111
Progressive Disclosure 
http://www.useit.com/alertbox/progressive-disclosure.html

References
Error Messages, Microsoft
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511267.aspx
User Experience Design Principles, Microsoft
http://msdn.microsoft.com/en-us/library/windows/desktop/dd834141.aspx
Designing with Windows Presentation Foundation, Microsoft
Top Guidelines Violations, Microsoft
How to Design a Great User Experience, Microsoft
Sites as Collections of Pages, Microsoft 
http://channel9.msdn.com/Learn/Courses/SharePoint2010Developer/UiEnhancements/SitesasCollectionsofPages
Microsoft Solution Framework, Microsoft 
http://msdn.microsoft.com/en-us/library/dd380647.aspx

References
UI Patterns and Techniques
http://www.time-tripper.com/uipatterns/Requirement is crucial
First Principles of Interaction Design, Bruce Tognazzini
http://www.asktog.com/basics/firstPrinciples.html
Ten Laws to Design By 
http://3.7designs.co/blog/2010/07/ten-laws-to-design-by/
Short-Term Memory and Web Usability, Jakob Nielsen
http://www.useit.com/alertbox/short-term-memory.html
UI Pattern 
http://www.patternry.com/
Six And Half Philosophies for Design & Innovation, Alex Zhu 
http://www.slideshare.net/mylonelyhouse/six-and-half-philosophies-for-design-innovation-presentation
Multitier architecture 
http://en.wikipedia.org/wiki/Multitier_architecture
How To Be A Good Product Manager
http://www.goodproductmanager.com/2009/01/15/differentiate-to-avoid-being-a-me-too/

References
Principles of user interface design, wikipedia
http://en.wikipedia.org/wiki/Principles_of_user_interface_design
The Paradox of Choice: Why More Is Less, Barry Schwartz
http://www.amazon.com/Paradox-Choice-More-Less-P-S/dp/0060005696
Designing with the Mind in Mind, Jeff Johnson
http://www.amazon.com/Designing-Mind-Simple-Understanding-Interface/dp/012375030X/ref=sr_1_1?
ie=UTF8&qid=1325227439&sr=8-1
INSPIRED: HOW TO CREATE PRODUCTS CUSTOMERS LOVE, Cagan, Marty
http://www.amazon.com/Inspired-Create-Products-Customers-Love/dp/0981690408/ref=sr_1_1?
ie=UTF8&qid=1325320164&sr=8-1
Photo Credit: high wire 2 
http://www.flickr.com/photos/gee01/871748702/
Photo Credit: grocery shelf
http://blog.authenticfoods.com/wp-content/uploads/2010/08/Henrys-Grocery-Shelves.jpg

Design Simple but Powerful application

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Design Simple but Powerful application

Semelhante a Design Simple but Powerful application (20)

Último

Último (20)

Design Simple but Powerful application

Notas do Editor