SlideShare a Scribd company logo
1 of 161
Download to read offline
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
HOW
Part 1: About Simple and Powerful
Part 2: Deep Dive – How to address the challenges?
Case Study: Simplify the control
Source: Secrets of Simplicity: rules for being simple and usable
How to simplify the remote control?
Case Study: Simplify the control
Remove features
Case Study: Simplify the control
Hide features
Case Study: Simplify the control
Group features
Source: Secrets of Simplicity: rules for being simple and usable
Case Study: Simplify the control
Displace features
Part 2 Table of contents
REQUIREMENT
• Requirements are crucial
• Tips for avoiding feature creep
DESIGN
• Solution architecture design
• UX design
• Technical design
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
Part 2 Table of contents
REQUIREMENT
• Requirements are crucial
• Tips for avoiding feature creep
DESIGN
• Solution architecture design
• UX design
• Technical design
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.
Part 2 Table of contents
REQUIREMENT
• Requirements are crucial
• Tips for avoiding feature creep
DESIGN
• Solution architecture design
• UX design
• Technical design
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
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
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
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
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
Omit needless information
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 defined 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
Progressive Disclosure
LinkedIn shows more filters upon user’s request for people search.
Initial state Mouse hover Mouse click
Progressive Disclosure
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.
Learnability Efficiency Memorability Errors Satisfaction
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.
Learnability Efficiency Memorability Errors Satisfaction
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.
1. Source: 10 Usability Heuristics for User Interface Design, NNGroup
?
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.
Make information more visible
Make information more visible
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.
Learnability Efficiency Memorability Errors Satisfaction
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
1. Source: 10 Usability Heuristics for User Interface Design, NNGroup
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.
Learnability Efficiency Memorability Errors Satisfaction
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
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
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
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511329.aspx
Top Guidelines Violations, Microsoft
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511331.aspx
How to Design a Great User Experience, Microsoft
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511335.aspx
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

More Related Content

What's hot

Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignBART RADKA
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDPreeti Chopra
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesOXD
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design paulodavila
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
User Interface Design in Practice
User Interface Design in PracticeUser Interface Design in Practice
User Interface Design in PracticeJustine Sanderson
 
User centred design (UCD) and the connected home
User centred design (UCD) and the connected homeUser centred design (UCD) and the connected home
User centred design (UCD) and the connected homeCyber-Duck
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016Rob Hoyt
 
What is User Centered Design?
What is User Centered Design?What is User Centered Design?
What is User Centered Design?jamiecavanaugh
 
Web Site Usability
Web Site UsabilityWeb Site Usability
Web Site Usabilitywhite paper
 
Usability of web application
Usability of web applicationUsability of web application
Usability of web applicationBurhan Ahmed
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overviewBen Melbourne
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLalRaj Lal
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
Usability & Design Principles
Usability & Design PrinciplesUsability & Design Principles
Usability & Design PrinciplesClaus Medvesek
 
User Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsUser Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsLaura B
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1Sameer Chavan
 

What's hot (20)

Fundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred DesignFundamental principles of Usability and User Centred Design
Fundamental principles of Usability and User Centred Design
 
User Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UEDUser Experience & Design…Designing for others…UED
User Experience & Design…Designing for others…UED
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
 
Sunil Das Profile
Sunil Das ProfileSunil Das Profile
Sunil Das Profile
 
Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design Embry-Riddle Campus Solutions UX Design
Embry-Riddle Campus Solutions UX Design
 
User centered Design
User centered DesignUser centered Design
User centered Design
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
User Interface Design in Practice
User Interface Design in PracticeUser Interface Design in Practice
User Interface Design in Practice
 
User centred design (UCD) and the connected home
User centred design (UCD) and the connected homeUser centred design (UCD) and the connected home
User centred design (UCD) and the connected home
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016
 
What is User Centered Design?
What is User Centered Design?What is User Centered Design?
What is User Centered Design?
 
Web Site Usability
Web Site UsabilityWeb Site Usability
Web Site Usability
 
Usability of web application
Usability of web applicationUsability of web application
Usability of web application
 
General UX activities & process overview
General UX activities & process overviewGeneral UX activities & process overview
General UX activities & process overview
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLal
 
Best Practices in UX Design
Best Practices in UX DesignBest Practices in UX Design
Best Practices in UX Design
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
Usability & Design Principles
Usability & Design PrinciplesUsability & Design Principles
Usability & Design Principles
 
User Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & GoalsUser Experience Design Fundamentals - Part 1: Users & Goals
User Experience Design Fundamentals - Part 1: Users & Goals
 
Usability principles 1
Usability principles 1Usability principles 1
Usability principles 1
 

Similar to Design Simple but Powerful application

Agile methodology - Humanity
Agile methodology  - HumanityAgile methodology  - Humanity
Agile methodology - HumanityHumanity
 
Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02Techved Consulting
 
UX Design Tactics for Product Managers
UX Design Tactics for Product ManagersUX Design Tactics for Product Managers
UX Design Tactics for Product ManagersJeremy Horn
 
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners   Experience Dynamics Web SeminarUsability Tips And Tricks For Beginners   Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners Experience Dynamics Web SeminarExperience Dynamics
 
XPages: You Know the 'How to'. Now Learn the 'Why and What'.
XPages: You Know the 'How to'. Now Learn the 'Why and What'.XPages: You Know the 'How to'. Now Learn the 'Why and What'.
XPages: You Know the 'How to'. Now Learn the 'Why and What'.Teamstudio
 
Improving Functional Usability
Improving Functional UsabilityImproving Functional Usability
Improving Functional UsabilityYogesh B
 
UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...
UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...
UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...Lucas Jellema
 
Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Patrick Hays
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an OverviewJulie Grundy
 
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile ChallengesIs Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile ChallengesFITC
 
Usability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter eventUsability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter eventKay Aubrey
 
Integrating User Centered Design with Agile Development
Integrating User Centered Design with Agile DevelopmentIntegrating User Centered Design with Agile Development
Integrating User Centered Design with Agile DevelopmentJulia Borkenhagen
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User ExerienceTanya Zavialova
 
Building Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon ValleeBuilding Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon ValleeProductHuntTO
 
Universal usability engineering
Universal usability engineeringUniversal usability engineering
Universal usability engineeringAswathi Shankar
 
What is Product Management?
What is Product Management? What is Product Management?
What is Product Management? Angelina Fomina
 

Similar to Design Simple but Powerful application (20)

Agile methodology - Humanity
Agile methodology  - HumanityAgile methodology  - Humanity
Agile methodology - Humanity
 
Collaborating in the Cloud with Lync
Collaborating in the Cloud with LyncCollaborating in the Cloud with Lync
Collaborating in the Cloud with Lync
 
Usability for all budgets
Usability for all budgetsUsability for all budgets
Usability for all budgets
 
Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02Introductiontousability 090407053727-phpapp02
Introductiontousability 090407053727-phpapp02
 
UX Design Tactics for Product Managers
UX Design Tactics for Product ManagersUX Design Tactics for Product Managers
UX Design Tactics for Product Managers
 
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners   Experience Dynamics Web SeminarUsability Tips And Tricks For Beginners   Experience Dynamics Web Seminar
Usability Tips And Tricks For Beginners Experience Dynamics Web Seminar
 
Introduction To Usability
Introduction To UsabilityIntroduction To Usability
Introduction To Usability
 
XPages: You Know the 'How to'. Now Learn the 'Why and What'.
XPages: You Know the 'How to'. Now Learn the 'Why and What'.XPages: You Know the 'How to'. Now Learn the 'Why and What'.
XPages: You Know the 'How to'. Now Learn the 'Why and What'.
 
Improving Functional Usability
Improving Functional UsabilityImproving Functional Usability
Improving Functional Usability
 
UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...
UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...
UX-plosive stuff - user experience to come first (ADF Enterprise Mobility Con...
 
Ux design-fundamentals
Ux design-fundamentalsUx design-fundamentals
Ux design-fundamentals
 
Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013Usability Presentation - IIS Brownbag 2013
Usability Presentation - IIS Brownbag 2013
 
User Experience Design: an Overview
User Experience Design: an OverviewUser Experience Design: an Overview
User Experience Design: an Overview
 
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile ChallengesIs Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
 
Usability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter eventUsability Testing for Qualitative Researchers - QRCA NYC Chapter event
Usability Testing for Qualitative Researchers - QRCA NYC Chapter event
 
Integrating User Centered Design with Agile Development
Integrating User Centered Design with Agile DevelopmentIntegrating User Centered Design with Agile Development
Integrating User Centered Design with Agile Development
 
Multi Platform User Exerience
Multi Platform User ExerienceMulti Platform User Exerience
Multi Platform User Exerience
 
Building Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon ValleeBuilding Beautiful and Highly Usable Products by Simon Vallee
Building Beautiful and Highly Usable Products by Simon Vallee
 
Universal usability engineering
Universal usability engineeringUniversal usability engineering
Universal usability engineering
 
What is Product Management?
What is Product Management? What is Product Management?
What is Product Management?
 

Recently uploaded

ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Pranav Subramanian
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementMd. Shariful Hoque
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesThomas Schielke
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONAnastasiya Kudinova
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisPeclers Paris
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfAlasAlthaher
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Thomas Schielke
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Yantram Animation Studio Corporation
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...Pranav Subramanian
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesVellyslav Petrov
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...Pranav Subramanian
 

Recently uploaded (20)

ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme ManagementSharif's 9-BOX Monitoring Model for Adaptive Programme Management
Sharif's 9-BOX Monitoring Model for Adaptive Programme Management
 
How Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives citiesHow Apple strives for the perfect sky and revives cities
How Apple strives for the perfect sky and revives cities
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022ASME B31.4-2022 estandar ductos año 2022
ASME B31.4-2022 estandar ductos año 2022
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSIONPORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
PORTFOLIO 2024_ANASTASIYA KUDINOVA / EXTENDED VERSION
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers ParisFW25-26 Knit Cut & Sew Trend Book Peclers Paris
FW25-26 Knit Cut & Sew Trend Book Peclers Paris
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
CAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdfCAPITAL GATE CASE STUDY -regional case study.pdf
CAPITAL GATE CASE STUDY -regional case study.pdf
 
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
Cities Light Up in Solidarity With Ukraine: From Internationally Synchronized...
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
Exploring Tehran's Architectural Marvels: A Glimpse into Vilaas Studio's Dyna...
 
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
LIGHTSCAPES: HOW MIGHT WE DESIGN AN INCLUSIVE AND ACCESSIBLE CLASSICAL CONCER...
 
ArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern HomesArtWaves 2024 - embracing Curves in Modern Homes
ArtWaves 2024 - embracing Curves in Modern Homes
 
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
STITCH: HOW MIGHT WE PROMOTE AN EQUITABLE AND INCLUSIVE URBAN LIFESTYLE PRIOR...
 

Design Simple but Powerful application

  • 1. Simple and Powerful Ver. 0.92 Jim Liang Terry Wang
  • 2. Part 1: About Simple and Powerful Part 2: Deep Dive – How to address the challenges?
  • 4. 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?
  • 5. People want powerful products Powerful Product
  • 6. Powerful products have a lot of functionalities and information, and usually it’s difficult to use, build and maintain. But powerful usually means complicated
  • 7. Can we have both? There is a natural tension between the two. POWERFULSIMPLE
  • 8. 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
  • 9. 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
  • 10. Extremely complex UI works really well in extreme cases Figure: Airplane cockpit
  • 11. 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
  • 12. • 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
  • 13. 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
  • 14. HOW
  • 15. Part 1: About Simple and Powerful Part 2: Deep Dive – How to address the challenges?
  • 16. Case Study: Simplify the control Source: Secrets of Simplicity: rules for being simple and usable How to simplify the remote control?
  • 17. Case Study: Simplify the control Remove features
  • 18. Case Study: Simplify the control Hide features
  • 19. Case Study: Simplify the control Group features
  • 20. Source: Secrets of Simplicity: rules for being simple and usable Case Study: Simplify the control Displace features
  • 21. Part 2 Table of contents REQUIREMENT • Requirements are crucial • Tips for avoiding feature creep DESIGN • Solution architecture design • UX design • Technical design
  • 22. Part 2 Table of contents REQUIREMENT • Requirements are crucial • Tips for avoiding feature creep DESIGN • Solution architecture design • UX design • Technical design
  • 23. 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%
  • 24. Crappy requirements lead to crappy products Rubbish Out Long time development Rubbish In
  • 25. Part 2 Table of contents REQUIREMENT • Requirements are crucial • Tips for avoiding feature creep DESIGN • Solution architecture design • UX design • Technical design
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. Validate requirements early IT managers, CIO, Marketing, etc End UserProxies Talk to the real users
  • 30. • Paper Prototypes • Usability Testing • Site Visit, etc The approaches for validation
  • 31. • 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. 
 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
  • 37. 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 ”
  • 38. 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.
  • 39. 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
  • 40. 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.
  • 41. Part 2 Table of contents REQUIREMENT • Requirements are crucial • Tips for avoiding feature creep DESIGN • Solution architecture design • UX design • Technical design
  • 42. 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

  • 43. 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
  • 44. Workflow reduces human efforts on routine tasks. Automation – Workflow Figure: Oracle Workflow Builder
  • 45. Automation – Notification Actionable notifications has become a standard mechanism in modern systems.
  • 46. Setting up a rule for once and it will do the work automatically afterwards. Automation – Rules Figure: Microsoft Outlook
  • 47. Automation – Batch action In Adobe Photoshop, people can record actions and re-apply them to a batch of photos.
  • 48. Automation – Template In Zoho, people can create different layouts for invoices based on system-provided templates.
  • 49. 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
  • 50. 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.
  • 51. 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
  • 52. Integration Letting systems talk to each other eliminates the needs for human input. Less human intervention also means less error-prone. A B C
  • 53. Continuity in iOS 8 bridges the workflow gap between multiple Apple devices. Integrating devices
  • 54. Integrating services IFTTT lets people automate routine tasks by connecting different web services.
  • 55. 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
  • 56. 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
  • 57. 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
  • 58. Siri uses technology to eliminate UIs in all places. Technology simplifies the solution
  • 59. Touch ID saves the effort of entering passcode each time the user wants to unlock the phone. Technology simplifies the solution
  • 60. Business Intelligence let you identify your problem easily Figure: Mixpanel funnel analysis
  • 61. Let people help each other User ratings on imdb.com User comments on amazon.com
  • 62. 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)
  • 63. 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
  • 64. Puts users’ needs at the center of design We are not the users! Product managers, designers and developers are not the real users.
  • 65. 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
  • 66. 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
  • 67. 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? ?
  • 68. 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
  • 69. 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
  • 70. The elements of user experience Source: The Elements of User Experience – Jesse James Garrett
  • 71. 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
  • 72. 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.
  • 73. 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.
  • 74. Figure: Information architecture of the library of University Duke
  • 75. 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
  • 76. Wizard breaks a complex task into several steps. Each step is presented in a separate screen. Figure: Windows new network connection wizard
  • 77. Information on the same screen can be further organized into logical groups. Figure: AGF website
  • 78. 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
  • 79. How to create visual hierarchy Group Alignment Contrast Repetition
  • 80. Figure: ia.net Figure: basecamp.com
  • 81. 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
  • 82. Source: Introduction to Usability, Nielsen Norman Group Learnability Efficiency Memorability Errors Satisfaction Usability is defined by 5 quality components:
  • 84. 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
  • 85. 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
  • 87. 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
  • 88. 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 defined areas
 • Use scannable layout
 • Provide clear visual clues
 1. Source: Don’t make me think, Steve Krug
  • 89. 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.
  • 90. Remove visual clutter The blue boxes above add no information but clutter. Below design communicates the same amount of information with less visual elements.
  • 91. 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
  • 92. 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.
  • 93. 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
  • 94. Progressive Disclosure LinkedIn shows more filters upon user’s request for people search.
  • 95. Initial state Mouse hover Mouse click Progressive Disclosure Figure: Google Plus
  • 96. 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
  • 98. Microsoft Windows 3.x File Manager Microsoft Windows 7 File Manager Visualize — Numbers
  • 99. 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
  • 100. Users don’t need to think what the chart or font is when they can see them before selecting them. Visualize — Previews
  • 101. Visualize — Illustrations Basecamp uses these illustrations to explain what their products do. Image: basecamp.com
  • 102. 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.
  • 103. 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
  • 104. Guide users – Demo / tutorial Very few people take the time to read instructions. Figure: pixate.com
  • 105. 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
  • 106. 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
  • 107. Guide users – Blank Slate Basecamp uses the blank slate to briefly explain what the product does and encourages the user to add a project.
  • 108. 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.
  • 109. 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
  • 110. 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.
  • 111. 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.
  • 112. Be consistent Consistency makes an application easier to learn and use. Note: Consistency is a guiding principle, not the ultimate goal.
  • 113. Learnability Efficiency Memorability Errors Satisfaction
  • 114. 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
  • 115. 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
  • 116. 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.
  • 117. 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.
  • 118. 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.
  • 119. 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
  • 120. Facilitate users — Drag and Drop Rich visual feedback is key to successful direct manipulation.
  • 121. 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.
  • 122. Facilitate users — Batch actions Photoshop actions can improve productivity for those who repeatedly process pictures.
  • 123. 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.
  • 124. 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
  • 125. 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
  • 126. Adobe Acrobat Reader will display a thumbnail as user scroll to help user quickly navigate through the pages. Facilitate users — Content preview
  • 127. Flickr inline editor let user focus on the screen and won’t break the task flow. Facilitate users — Inline editing
  • 128. Facilitate users — Provide different views The Calendar app in iOS 8 provides different views to look at appointments.
  • 129. mint.com allows users to consolidate key information from different sources into one page. Facilitate users — Consolidate information
  • 130. 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.

  • 131. 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.
  • 132. Learnability Efficiency Memorability Errors Satisfaction
  • 133. 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. 1. Source: 10 Usability Heuristics for User Interface Design, NNGroup ?
  • 134. Bing has a link to the user’s search history. The link helps users remember previous searches. Make information more visible
  • 135. When a user goes back to Amazon.com, the personalized homepage includes a list of recently viewed items. Make information more visible
  • 136. Make information more visible People can quickly open recent documents in Microsoft PowerPoint. And the app will remember the last state too.
  • 137. Auto-completion In this design, people don’t have to remember the exact state names.
  • 138. Reminder Outlook will reminds people when a meeting is about to happen.
  • 139. Learnability Efficiency Memorability Errors Satisfaction
  • 140. 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 1. Source: 10 Usability Heuristics for User Interface Design, NNGroup
  • 141. 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
  • 142. Provide Warning Alarm to warn against dangerous actions
  • 143. Provide preview before taking the action MS Office -Print Preview Adobe – Filter effect Preview
  • 144. 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.
  • 145. 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.
  • 146. 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.
  • 147. 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
  • 148. 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.
  • 149. Learnability Efficiency Memorability Errors Satisfaction
  • 150. 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
  • 151. 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
  • 152. 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
  • 153. Performance, Scalability, Extensibility • Performance and scalability are key. • Offer the customer flexibility to customize the system. For example, providing APIs.
  • 154. Quality of code • Functional correctness • Clarity • No duplication
  • 155. 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
  • 156. Appendix What does "Simple" Mean? Source: Simplifying for Usability, SAP
  • 157. 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
  • 158. 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
  • 159. 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 http://msdn.microsoft.com/en-us/library/windows/desktop/aa511329.aspx Top Guidelines Violations, Microsoft http://msdn.microsoft.com/en-us/library/windows/desktop/aa511331.aspx How to Design a Great User Experience, Microsoft http://msdn.microsoft.com/en-us/library/windows/desktop/aa511335.aspx 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
  • 160. 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/
  • 161. 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

Editor's Notes

  1. Users want simplicity; they don't have time learn a profusion of features in enough depth to select the few that are optimal for their needs.http://www.useit.com/alertbox/progressive-disclosure.htmlSimplify for usability: Simplification is not a goal in itself. By making applications simpler, you make them more effective, efficient,and, hopefully, more fun to use. Simplification reduces the barrier that computer software creates betweenusers and their tasks. It increases productivity and user satisfaction and thus reduces costs.http://www.sapdesignguild.org/resources/simplification/index.htm
  2. http://msdn.microsoft.com/en-us/library/aa511332.aspxAn application is powerful when it has the right combination of these characteristics: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.
  3. Credit:http://www.flickr.com/photos/gee01/871748702/
  4. Making the simple complicated is commonplace; making the complicated simple, awesomely simple, that’s creativity.”—Charles Mingus
  5. Microsoft:An application is powerful when it enables its target users to realize their full potential efficiently.Thus, the ultimate measure of power is productivity, not the number of features.Different users need help in achieving their full potential in different ways. What is enabling to some users might harm versatility, directness, and control for others. Well-designed software must balance these characteristics appropriately. For example, a desktop publishing system designed for nonprofessionals might use wizards to walk users through complex tasks. Such wizards enable the target users to perform tasks that they otherwise wouldn't be able to perform. By contrast, a desktop publishing system for professionals might focus on directness, efficiency, and complete control. For users of such an application, wizards may be limiting and frustrating.Differentiate to avoid being a “me too”http://www.goodproductmanager.com/2009/01/15/differentiate-to-avoid-being-a-me-too/
  6. Address the complexity from its origin.
  7. Make the hard decisionsDo you really need that feature, command, or option? If so, do it well. If not, cut it! Don't avoid difficult decisions by making everything optional or configurable.Source: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511335.aspx
  8. Build a skinny system to demonstrate that you have eliminated all critical risks• Add more capabilities on top of that skinny systemMinimum Viable Product (MVP)
  9. Fail often , Fail Early
  10. http://www.salesforce.com/us/developer/docs/workbook/index.htm
  11. Carefully balance work between system and user.
  12. Source: http://en.wikipedia.org/wiki/Workflow
  13. Carefully balance work between system and user.
  14. JavaScript,APIMaster PageUser Custom ActionsUsing SharePoint 2010, your people can share ideas and expertise, create custom solutions for specific needs, and find the right business information to make better decisions.  http://channel9.msdn.com/Learn/Courses/SharePoint2010Developer/UiEnhancements/SitesasCollectionsofPagesSee how Sites in SharePoint 2010 just becomes a collection of pages. Unlike before pages now play a key role in the structure of a site. SharePoint 2010 leverages wiki concepts for managing content and extends these concepts by allowing for the inclusion of web parts within the wiki pages themselves. Add a content editor Web Part to a page and add the following HTML.----------------------------------------------------------------------------------------
  15. http://www-01.ibm.com/software/analytics/business-intelligence.html
  16. http://www.pandora.com/corporate/mgp
  17. http://www.sapdesignguild.org/resources/simplification/index.htmUsers create mental models of their software when they are working with it. These models are simplistic(incomplete), informal, often concrete, and may contain errors. Mental models help users to envision,predict, and explain system actions. They aid users in planning their actions.------------------------Designing with the Mind in Mind, Jeff JohnsonWhile pursuing a goal, they take familiar paths whenever possible rather than exploring new ones,especially when working under deadlines.
  18. Power User: http://en.wikipedia.org/wiki/Power_user------------------------------professional users may still need a powerful and flexible application that is hard to use for untrained or casual usershttp://www.sapdesignguild.org/resources/simplification/index.htm
  19. Reducing the number of steps in a procedure lets users complete their tasks faster
  20. Alan Cooper: although beginners quickly improve to become intermediates, they seldom go on to become experts.In many cases, a well-balanced user interface takes the same approach. It doesn’tcater to the beginner or to the expert, but rather devotes the bulk of its efforts tosatisfying the perpetual intermediate. At the same time, it provides mechanisms sothat both of its smaller constituencies can be effective.The experience level of people performing an activity tends, like most populationdistributions, to follow the classic statistical bell curve. For almost any activity requiring knowledge or skill, if we graph number of people against skill level, a relatively small number of beginners are on the left side, a few experts are on the right, and the majority—intermediate users—are in the center.[Shneiderman's Principles of Human-Computer Interface Design] Experienced users want to be in charge. Surprising system actions, tedious sequences of data entries, inability or difficulty in obtaining necessary information, and inability to produce the action desired all build anxiety and dissatisfaction
  21. Simplicity is all about reducing and reorganizing the complex into small and manageable. Dmitry Fadeyev Modularity is a general systems concept, typically defined as a continuum describing the degree to which a system’s components may be separated and reGroupingd.[1] It refers to both the tightness of coupling between components, and the degree to which the “rules” of the system architecture enable (or prohibit) the mixing and matching of components. Its use, however, can vary somewhat by context-------------------Structuring involves determining the appropriate levels of granularity[2] for the information “atoms” in your site, and deciding how to relate them to one another. Organizing involves grouping those components into meaningful and distinctive categories. Labeling means figuring out what to call those categories and the series of navigation links that lead to them.Peter Morville; Louis Rosenfeld (2008-07-14). Information Architecture for the World Wide Web (Kindle Locations 654-657). O'Reilly Media. Kindle Edition.
  22. http://www.patternry.com/p=content-groups/Content groups pattern is about Combining content into logically titled sections. Well organized content allows people to scan information easily and get quickly an overview of the content on the page.Google Analytics Dashboard displays information quickly and clearly. The information is logically structured and information groups have good titles.
  23. Without visual hierarchy, page elements compete for attention, and as a result, none of them win. In all hierarchies, only certain elements should be on top; the rest need to follow suit. The appropriate position of each element in the hierarchy depends on the message you are trying to communicate. If all the elements in a page layout are given equal visual weight, making sense of the page is difficult. Meaning is created through the differences and similarities among elements and their place in the page's visual hierarchy.http://www.lukew.com/ff/entry.asp?981
  24. Breaks the information into distinct sections, and breaks large sections intosubsectionsl Labels each section and subsection prominently and in such a way as to clearlyidentify its contentl Presents the sections and subsections as a hierarchy, with higher level sectionspresented more strongly than lower level ones
  25. Progressive DisclosureProgressive disclosure is one of the best ways to satisfy both of these conflicting requirements. It's a simple, yet powerful idea:Initially, show users only a few of the most important options.Offer a larger set of specialized options upon request. Disclose these secondary features only if a user asks for them, meaning that most users can proceed with their tasks without worrying about this added complexity.http://www.useit.com/alertbox/progressive-disclosure.html================================[SAP guideline ] Simplicity is not merely the reduction of structural complexity of screens and applications to make the application experience as simple and intelligible as possible. Simplicity also refers to designing screens that the user perceives to be simple and straightforward, regardless of how complex the data must be to perform the task.For example, explicit guidance, if too long or verbose, adds yet another layer of unneeded complexity. Well-designed screens in the spirit of simplicity do not need explicit guidance. The interface should empower the user to decide how to proceed with his tasks, even if the user has little application knowledge. The user must, however, possess task knowledge (i.e. they must know what they are doing).
  26. The classic case study for Hick’s law involves a grocery store which put out free jam tasting for customers. In one case they had 40+ jams to sample and choose from, and in the other only a few samples. What they discovered is that customers purchased more jam when presented with three to four options over the forty plus. Most customers opted not to purchase jam at all rather than pick from such a large selection.Read more about Hick’s Law.
  27. http://www.useit.com/alertbox/progressive-disclosure.htmlProgressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.-----------------------------------examples of progressive disclosure on the webLearn more linkRelated topics linkOverview of account information on the first screenView more details linkAdvanced search linkhttp://en.wikipedia.org/wiki/Progressive_disclosure
  28. No matter how cool your user interface is, less would be better ”-Alan Cooper , the father of Visual Basic
  29. http://developer.yahoo.com/ypatterns/navigation/accordion.html
  30. http://developer.yahoo.com/ypatterns/navigation/accordion.html
  31. The carousel providing an engaging experience for object selection.---------------------------------------http://developer.yahoo.com/ypatterns/selection/carousel.htmlhttp://ui-patterns.com/patterns/Carousel
  32. http://informationarchitects.jp
  33. Visual Design Principle: Balance, unity, proximity, emphasis, contrast
  34. You can apply metaphors in a number of ways:l Use a terminology that is borrowed from real-world objects and processes, for the objects and processesof your application.l Use graphics that correspond to real world objects (and maybe processes or objects corresponding toprocesses).l Design the processes so that they resemble or are identical to real-world processes.l Design the desktop or at least the application window so that it resembles the corresponding real-worldsetting (usually by using graphics).l And, of course, you can Grouping all of these methods.There are two main problems with metaphors:l The metaphor may not be suitable with respect to all software applications that are based on it. There areoccasions where people use their real-world knowledge but run into an error because the metaphor is notapplicable. Such cases can pose serious problems to users because the source of the error is not obviousto them. Some authors even discourage the use of metaphors for this reason.l The metaphor may be too remote or abstract, so that users have to invest too much effort into translatingthe metaphor into their world. In this case, the metaphor does not help users. Instead, it forms an obstacleto them.
  35. Getting rid of all those words that no one is going to read has several beneficial effects:> It reduces the noise level of the page.> It makes the useful content more prominent.> It makes the pages shorter, allowing users to see more of each page at a glance without scrolling.
  36. use the blank slate stage as an opportunity to insert quick tutorials, help blurbs, and even links to example screenshots to get people started.http://37signals.com/svn/archives/000375.php
  37. sometimes
  38. http://designinginterfaces.com/firstedition/index.php?page=Input_Prompt
  39. http://boxesandarrows.com/view/storyboarding-ipadPicture: http://www.wired.com/epicenter/2011/06/onswipe/
  40. Source of text: http://msdn.microsoft.com/en-us/library/windows/desktop/aa511329.aspxSource of Picture: http://www.apple.com/iphone/features/phone.htmlNokia picture : BestBuy:http://www.bestbuy.com/site/olspage.jsp?id=cat13506&type=page&skuId=2579162&productId=1218336888473&defurl=false&h=387Hand Gesture: http://graffletopia.com/stencils/432
  41. The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users 1.
  42. simple and consistent interaction rules :-Similar or equal procedures should always work the same way!But note: Sometimes consistent and simple rules may lead to less efficient procedures. However, users often remember only the simple rules and do not use the efficient procedures.Source: simplifying the usability, SAPhowever, that consistency is not a goal as such – it is just a "rule of thumb" in order to achievesimplicity. There are many cases, where users do not care about consistency, or do not even noticeinconsistencies. Do not enforce consistency, just because it is a widely accepted principle and a goodfoundation for a "theoretical argument," if users behave differently and find it easier to disregard it. Often, onlyuser tests can provide a final answer to the question of which solution is the best one for the users.
  43. Breadcrumbs provide a quick way to navigate up the site hierarchyTagging lets users to organize and categorize their collections of items in the way they find useful.Tags make content easier to find.
  44. . Using a task that prevents habituation (e.g. a task that changes subtly every time) would solve the problem but draw attention away from the user’s end task and annoy the user. You can expect "automatic" execution only for tasks that arerepeated over and over.example: Do not expect casual users to become proficient with your software. Instead, make it simple to use!------------------------When one uses an interface repeatedly, some frequent physical actions become reflexive:----------------------------High frequency repetition of tasks can lead to "automatic" execution…Simplifying for Usability, SAP
  45. draw user’s attention to the primary action of a form.All form actions are not equal, and therefore the visual presentation of actions should match their importance to make it easier to complete a form.Visual distinction helps users make “good” choices. For example, “Cancel” is secondary action which is rarely used compated to primary actions. Therefore, the visual weight of it should be reduced in some way to minimize the risk of selecting it unintentionally.\\Prefer consistent-location UI over “smart” UI.[Jensen Harris]
  46. Fitts’ Law can be described as “The time required to move to a target is a function of the target size and distance to the target.” We can apply this to web design by looking at the hit area of our objects. Meaning the larger we can make the clickable area of key links and navigational elements the easier they will be to click on. Remember that while as web designers we may be extremely proficient at using the mouse and the web, there are a lot of users who still have trouble with these basic functions
  47. Always-Visible Tools are always visible instead of hiding them until the user needs themhttp://www.patternry.com/p=always-visible-tools/
  48. Direct ManipulationIn 1974, Ben Shneiderman coined the term direct manipulation to describe aninterface design strategy consisting of three important components: Visual representation of the objects that an application is concerned with Visible and gestural mechanisms for acting upon these objects (as opposed totext commands) Immediately visible results of these actions19A less rigorous definition would say that direct manipulation is clicking and draggingthings, and although this is true, it can easily miss the point that Shneidermansubtly makes. Notice that two of his three points concern the visual feedback theprogram offers to users. It might be more accurate to call it “visual manipulation”because of the importance of what users see during the process. Unfortunately,many attempts at direct-manipulation idioms are implemented without adequatevisual feedback, and these interactions fail to effectively create an experience ofdirect manipulation.Most direct manipulation interaction idioms fall into one of seven categories: Pointing Selection Drag and drop Control manipulation Palette tools Object manipulation (such as positioning, shaping, and resizing) Object connection
  49. Knowing that there’s a cost associated with jumping from page to page, you can understand now why it’s important to keep the number of those jumps down. When a common task requires many page jumps, try to reduce it to one or two. But the real efficiency gains come from the structure of the application. One of the nastiest things a designer can do is force a user to go into multiple levels of subpages, dialogs, and so forth every time he needs to accomplish a simple and everyday task. (Worse is to lead him there, tell him he can’t accomplish it because of some missing precondition, and send him back to square one.) Can you design your application so that the most common 80% of use cases can be done in one page, without any context switches? (Or perhaps only one?)Tidwell, Jenifer (2010-12-15). Designing Interfaces (Kindle Locations 2239-2245). OReilly Media – A. Kindle Edition.
  50. Versatile. The application enables users to perform a wide range of tasks effectively in a variety of circumstances
  51. Versatile. The application enables users to perform a wide range of tasks effectively in a variety of circumstances
  52. http://msdn.microsoft.com/en-us/library/t5b5kc41.aspx
  53. For example, short-term memory famously holds only about 7 chunks of information, and these fade from your brain in about 20 seconds.
  54. For example, short-term memory famously holds only about 7 chunks of information, and these fade from your brain in about 20 seconds.
  55. [Shneiderman's Principles ]:Prevent Errors – The third principle is to prevent errors whenever possible. Steps can be taken to design so that errors are less likely to occur, using methods such as organizing screens and menus functionally, designing screens to be distinctive and making it difficult for users to commit irreversible actions. Expect users to make errors, try to anticipate where they will go wrong and design with those actions in mind.
  56. [Shneiderman's Principles ]:Prevent Errors – The third principle is to prevent errors whenever possible. Steps can be taken to design so that errors are less likely to occur, using methods such as organizing screens and menus functionally, designing screens to be distinctive and making it difficult for users to commit irreversible actions. Expect users to make errors, try to anticipate where they will go wrong and design with those actions in mind.
  57. The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.Larry Constantine and Lucy Lockwood
  58. http://www.asktog.com/basics/firstPrinciples.htmlBruce Tognazzini– First Principles of Interaction Design[Shneiderman's Principles ]:Prevent Errors – The third principle is to prevent errors whenever possible. Steps can be taken to design so that errors are less likely to occur, using methods such as organizing screens and menus functionally, designing screens to be distinctive and making it difficult for users to commit irreversible actions. Expect users to make errors, try to anticipate where they will go wrong and design with those actions in mind.
  59. Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Jakob Nielsen