Design Simple but Powerful application

Simple But Powerful

Ver. 0.91

Jim Liang Terry Wang

Part 1 :: About Simple and Powerful

Part 2 :: Deep Dive – How to address the challenges ?

About Simple But Powerful

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 effiency.

To drive fast, which one is better ?


Customers want powerful products

Powerful Product

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


But “powerful” usually means “complicated”

Complexity is common in powerful products

When more and more functionalities are added into the product, feature-laden product inevitably becomes more and more complicated.


Can we have both?

There is a natural tension between them.

POWERFULSIMPLE


Different product types have different focus

The focus is the simplicity instead of powerful features in some types of product.

The focus is the powerful features instead of simplicity in some types of product.

SimplePowerful

SimplePowerful


Case Study 1

Depends on your target market and target user, choose suitable design strategy.

Adobe Photoshop•Rich functionalities•High learning curve.•Efficiency is the main focus•Mainly oriented at professional users.

Professional Application

Google Picnik•Limited functionalities•Easy to learn and use.•Oriented at non-professional users.

Casual Application


Case Study 2

Extreme case: Sometimes complex UI is necessary and it works pretty well

Airplane Cockpit

:: Even in the same application, the priorities are different ::


Different modules/tasks have different priority

Routine & Repetitive tasks

Efficiency is the focus

Occasional Tasks

Ease of learning is the focus

• Diverse requirements, including many edge use cases

• Complicated requirements, even including invalid requirements

• Complicated processes and task flows

• Many people are involved in business scenarios

• Many dependency 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…

Desig

n &

Imp

leme

ntatio

n


What factors could result in the complexity ?

Req

uire

men

t


Balance the conflicting goals

You can achieve both power and simplicity through carefully balanced feature selection and presentation1.

1 Source: Powerful and Simple, Microsoft

Art of Balance


How to achieve “Simple but Powerful” ?

HOW


Tackle the issues from different perspectives

Address The Challenges

Requirement Design Implementation*

* The topics regarding UCD process and software development methodology are not discussed in this document


Case Study : Simplify the control

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

How to simplify the remote control ?

- Remove Features




- Hide Features




- Group Features




- Displace Features




Part 1 :: About Simple and Powerful

Part 2 :: Deep Dive – How to address the challenges ?

• Part 2:: Deep Dive- How to address the challenge?

Solution Architecture Design

User Experience Design

Technical Design

Requirements are crucial

Tips for avoiding feature creep

Part2 - Table of content

Requirement

Design

Requirements > Requirements are crucial

How many requirements are really valid?

How many implemented requirements are actually used during operation?

Source: Johnson, J. Keynote speech XP 2002, Sardinia, Italy


Ensure the valid requirements

Rubbish OutLong time development

Rubbish In


Tackle the complexity from its source

• Simplicity is not only about UI design

• Crappy requirement management contributes a lot to the complicated UI and lousy user experience

• Feature creep is the enemy of simplicity.

• Avoiding feature creep is a constant battle




Technical Design



Requirement

Design


Requirements > Tips for avoiding feature creep

Tips for avoiding features creep

• Drive the design by target user’s goal rather than features

• Say No by default

• Validate the requirements early

• Optimize the requirements

• Prioritize the requirement

• Focus on core scenarios rather than fringe scenarios

• Try to reduce the features if possible

• Think big, Start Small

• Deal with the diverse requirements by “Layering” strategy

How to avoid feature creep ?

See details in the next slides


Drive design by target users' goals

• Don't drive the design by feature list. Instead, start the design from understanding and analyzing user's needs.

• Feature list can be a good approach for tracking requirement and product management. However, don't use it as the starting point for design.

• Avoid “me too” product 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

• It’s a natural tendency to add more features into system. However, new features lead to more UI elements , more development and maintain costs, more codes and more bugs.

• Challenge ourselves if the new features are really necessary

• Once it’s difficult to design an intuitive UI for a feature, it might be early warning signs that the requirement is questionable . So double-check the validity of requirement.

“ Do users really need it ? ”


Validate requirements early

( IT managers, CIO, Marketing, etc )

End UserProxies

talk to the real end users …

• Simple processes requires less complex design and implementation. Try to optimize the processes first before the design.

• Think about the requirements from a holistic context , including people, organization, process, etc.

• Think out of box. Innovative approach can even totally eliminate the complexity.


Optimize business processes

Streamline Task flow

• Prioritize use cases by Importance of scenarios & Frequency of use


Prioritize requirements

Frequency of use

Imp

ort

ance

of

Sce

nar

io

Use Cases:1. Create new Cash Accounts2. Enter expenses (excluding ERM)3. Enter AP Cash Payments4. Enter revenues5. Enter AR Cash Payments6. Enter incoming Cash Transfers7. Enter outgoing Cash Transfers 8. Cash Transfer Cash Box to Cash Box9. Personal drawings10. Personal Cash Contribution11. Print Petty Cash Report12. Configuration for Petty Cash13. Manual Payment without Reference14. Print Receipts 15. Closing Petty Cash Periods16. Do Correction/Adjustment postings17. Approval on Petty Cash transactions18. Migration Petty Cash Balances


Focus on core scenarios

• Focus on essentials and what matters. (80/20 rule)

• Design for the common case1

• Don't distort the system’s focus by edge cases

80 / 20

1 Source: Designing with the Mind in Mind, Jeff Johnson


Try to cut features if possible

• The simplest way to achieve simplicity is through thoughtful reduction1.

• Simple reduction is not sufficient. It requires thoughtful process without sacrificing the essential functions.

• Try stripping away the unessential elements in feature-laden product.

• The reduction shall always align with the core business goal.

1. Source: The Laws of Simplicity ， John Maeda

thoughtful reduction

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


Fail often. Fail early

• It’s hard to get it right at the first release.

• Deliver core scenarios first.

• Build product by iterative approach and validate it early in the market 1.

• Adapt the product strategy, solution and UI based on the real feedback from customers and users.

Source of Diagram ： MSF, Microsoft

“How to know what the essential requirements are? ”. Just ship the product early and validate it in the market.

CORE

Diverse requirements can easily lead to feature creep. You can cope with diversity by “layering” strategy :

• Focus on essential requirements and build the core functions.

• Provide customization capability so that customers can tailor the solutions.

• Allow end users to personalize the UI without any coding.


Address diverse requirements

Generalize the shared functions across application/industry and prioritize them

Build the core first !

The diverse requirements can be addressed by providing capability to extend, customize and personalize the solution .


Deal with diversity by “Layering” strategy

Personalization Adapt UI by end users

ExtensionEnhance functions by Rules, Scripts, Templates, Formula, Configuration by IT admin or power user

CustomizationCustomize features by 3rd party partners or customers themselves

Platform/CorePre-ship the core features and framework by software vendor *

User-friendlyFlexibility 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


Case Study: Microsoft Excel

Why is Microsoft Excel widely used in enterprise ?

• Very flexible to meet various needs• User can have powerful capability even without coding.• Efficient tools to enhance productivities


Case Study: Force.com

example: Create an Approval Process

Force.com offers an powerful, scalable, and secure platform for application development. So the 3rd parties can use this platform to customize the application development to meet diverse requirements.


Case Study: iPhone + App Store

iPhone is an excellence example of being “simple but powerful”.

Apple doesn’t deliver everything but the rich functionalities are still available in iPhone. The overall experience in iPhone is still simple.

How does apple achieve that ?




Technical Design



Requirement

Design


Design > Solution Architecture Design

Overview

• Automation- Let the system do as much of the work as possible

• Balance the workload between users

• Streamline the disjointed flow by integration

• Offer collaboration capability

• Offer monitoring capability

• Provide the flexibility

• Leverage the intelligence

• Simplify solution from a holistic view



Automation

Manual Data Entry RFIDthere is no UI needed to input or access data!

Bar-Code

Source of concept : Dan Rosenberg, SAP

The best user interface is no UI

Let the system do as much of the work as possible. For example,

• Use Workflow

• Automating the business process according to the rule

• Automatically routing information to people in the process

• Automatically delivering notifications like email, SMS, etc

• Use batch handling for repetitive actions, massive workload

• Rule, Macro, Script …

• Template

• Etc…


Automation


Automation – Workflow

example: Oracle workflow builder

Workflow can automate and streamline business processes according to the rule (i.e. workflow process definition) that you define. for example,

• Approval

• Substitution – If someone is absent, system will forward the task to somebody

else based on the pre-defined rule.

• Auto-dispatching work – The system can automatically assign the tasks to

users based on workload, availability, privilege, etc. For instance, the Call

Center case.


Automation – Workflow

Notification has become a standard mechanism in the modern system, including business application, SNS, etc.

example: workflow notification


Automation – create a rule

example: create a Rule in outlook

End user can set up rule to organize the email automatically in outlook without any complex coding.


Automation – create a rule

In Excel ， end user can use pre-defined color code to format cells. They can also create their own rule to format the cell on a condition. Once the condition is met, the cell will be formatted based on the rule.

example: create a Rule in Excel


Automation – batch action

In Adobe Photoshop, end user can create “Action” to execute a bundle of tasks automatically.

example: Batch Action


Automation – use template

In ZOHO Invoice, user can apply the specific format/layout for the invoice based on the pre-defined template.

example: Use Templates

Balance the workload between the users.

•Centralized management . E.g. system configuration, mass data management

•Decentralized management. e.g. employee self-service, interactive dashboard…


Balance the workload

How to distribute the tasks ?


Balance the workload – Decentralized approach

Decentralized approach – distribute the non-complicated tasks to end users.

example: Employee Self-Service in SAP Business ByDesign.Every employee can claim the expense, request the leave, purchase goods, etc in Self-Service center. This decentralized approach can increase productivity in the organization. Otherwise, too much work load on IT/admin will bring about the 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 user will be much easier.

Shift the complexity to advanced users


Balance the workload – Centralized approach


Offer collaboration capability

Collaboration can help a group of users work on the same page and perform their tasks in flexible way.

People Collaboration


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 feasibleReal-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

Predefined feature might not meet every user’s needs. Therefore, try to allow uses to extend the features by their own


Provide the flexibility – example1

SharePoint Designer

Visual Studio 2010

InfoPath 2010

In SharePoint 2010 the developer (and the user) has compete control of the user interface including the placement of web parts anywhere on the page. For instance, this means that it is possible to put the results of a survey next to text describing the survey. So the results of code and content can be commingled on the page to create rich live content scenarios.

For example, Tagging lets users to organize and categorize their collections of items in the way they find useful.


Provide the flexibility – example2

Users add their own tags to objects like photos, documents and let them manage existing tags to build a user-generated navigation system without any coding.


Leverage the intelligence

Don’t think about the design only from the visible UI. The hidden side of system is also the key of the simplicity and power. For example:

• Semantic Web

• Business Intelligence ( analyzed by system )

• Query, Reporting and Analysis

• Scorecards, Dashboard and Real Time Monitoring

• Text Mining

• Data Mining

• etc…

• Collective wisdom ( judged by human )

• Voting

• User’s review or recommendation, Expert’s review, etc

• co-creation, e.g. Wiki

• etc…


Leverage the intelligence – example1

example: MicroStrategy Support Center Dashboard

User can get insights and visibility from the power of business intelligence.



example: Quora

Through text mining, the related questions are automatically presented to users. Although intelligence itself is not a visible UI element, it makes the solution simple and powerful.



example: Pandora Radio

Through the comprehensive analysis of music, Pandora Radio can automatically “push” the music to users based on their taste. However, the smart algorithms for the recommendation is invisible to users.



Amazon’s recommendation is an excellent example of intelligence. By analyzing other user’s buying behavior, the intelligence simplifies user’s life.

Recommendation from system



User reviews.

example: e-Bay

User can benefit from Collective Intelligence. This can significant save their time and energy . This kind of intelligence is from human’s subjective judgment rather than from the computer’s analysis.

User’s Review



example: iTunes

Expert’s recommendations or Editor's picks are based on human’s judgment instead of complicated algorism on computers. The professional’s advice and opinions can help the common people to quickly find the information they might be interested in.

Expert’s Review


Simplify solution from a holistic view

Not only easy to use, but also

• Easy to buy

• Easy to upgrade (e.g. iPhone)

• Easy to maintain (e.g. SaaS)

• Easy to access• Mobile application

• Desktop application

• Web application

• Remote Access. E.g. virtualization




Technical Design



Requirement

Design





Technical Design



Know your users

Basic UI Design Framework

Design Principles and Tips

Requirement

Design


Design > UX Design > Know your users

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 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 neither beginners nor experts; instead, they are intermediates

Source: About the face 3, Alan Cooper




Technical Design



Know your users



Requirement

Design


Design > UX Design > Basic UI Design Framework

The elements of user experience

Source: The Elements of User Experience – Jesse James Garrett

Simplicity is dependent on how you organize functions, information into meaningful chunks/units.


POP UI design model

POP UI Design Model ( Prioritize, Organize, Present )

Pri

oriti

zeO

rganize

Present

UI DESIGN


Prioritizing information

Don’t treat everything equally. Instead, differentiate them according to the importance and usage frequency.

• Not every elements/tasks have same priority and importance

• Some of the controls are less important than others, and

some of the controls are used much less than others.

• Emphasize the core and remove the irrelevant.

• The UI for the frequently used tasks should be efficient.

• Hide the unimportant features and information

“If everything is important, Nothing is. 1 ”

Source: unknown

Pri

oriti

ze

Organize

Present

UI DESIGN


Organizing information

You can organize and structure information through

SeparatingSeparating the system/module/screens by time, space, dimension, logic, etc. it can hide complexity.

GroupingPutting related things together logically, visually, or by sequence, etc.

Present

OrganizeP

rior

itize

UI DESIGN


Organizing information

“ Divide each difficulty into as many parts as is feasible and necessary to resolve it. ”

Rene Descartes

Jef Raskin

“ Most human beings can only concentrate on one thing at a time. ”

Note ： Separation can make complex things look simple. However, it could result in more clicks and usually less efficiency, even discoverability issues.


Organizing information – example

Separate as steps (wizard). The complexity is broke down into different steps, and more screen real estate is available for the guidance information.



Separate as different groups. So the complexity is divided into the various logical groups. For example,There are several groups like Preference, mail setup, mail format, spelling, etc. in Outlook Option dialog.



example: Visual Studio

Microsoft Visual Studio : there are tons of features in this powerful product. They system is divided into a couple of logical groups. e.g. Form1.cs; Error List; Solution Explorer, Properties.



6013821000625562891

6013 8210 0062 5562 891



• Having the information logically organized makes scanning easier and helps to understand the content quickly.

• People like well-organized sites that make important information easy to find.

Source: UI Pattern http://www.patternry.com/

Example: Microsoft PowerPoint Options



example: SAP Business ByDesign


Presenting information

Choose the right element/pattern to present information to users depending on the usage scenarios. For example:

• Icon

• Text & Typography

• Sound

• Thumbnails

• Picture / Diagram

• Table

• Chart

• Form

• Dashboard

• Menu

• Toolbar

• Pagination

• Carousel

• etc…

Pri

oriti

ze

Organize

Present

UI DESIGN


Presenting information – example

Source: Six And Half Philosophies for Design & Innovation, Alex Zhu

Which one is better ?



example: SAP Business ByDesign

Table provides a structured way to present information, esp. data. It’s frequently-used pattern in business applications. It’s

• Easy to scan, analyze the data.• Easy to compare the items• Easy to view large volume of data by filtering, sorting, searching, etc

Table



example: www. apple.com

Table provides a clean and readable way to show information. Usually it’s used for displaying data but it can be used for presenting any kind of information.

You can enhance the table with color, icons, images, etc.

Table



Bad example:SAP Customer Service System

These buttons could be re-designed like the example below:

Use right controls and pattern!

In this example too many buttons are displayed on the screen. Most of buttons are only for navigation purpose. They make UI busy and confusing.

Grid-based design is an effective technique to design aesthetic layout. It can bring visual structure and balance to the page



For more Information about Grid-based Design:

http://www.subtraction.com/pics/0703/grids_are_good.pdf & http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

http://www.subtraction.com/pics/0703/grids_are_good.pdf

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/


Know your users





Technical Design



Requirement

Design


Design > UX Design > Design Principles and Tips

Think out Of box

Innovation makes big difference

Innovation can lead to the fundamental changes. It will probably eliminate the complexity in many cases.

Think out of box !!!


Case Study: Innovation makes the difference

Traditionally thumbnails are used for presenting the pictures, but the concept can be used in web browser as well. In Chrome the screenshots of web pages are shown in the launch page. It’s easy to recognize and click them. Therefore, creatively use the patterns can make a difference.

Some examples in the following slides are mainly for inspiring purpose and you can try to innovatively use them in your cases

thumbnails example Google Chrome


Simplify UI from every dimensions

Usability components, Nielsen(1993)

Learnability Efficiency Memorability Errors Satisfaction

Every aspects are important


Simplify UI from every dimensions :: Learnablity




Learnability is important

How to improve Learnability ?

• Match users’ expectation

• Provide clear structures

• Use scannable layout

• Less is more, use Progressive Disclosure

• Avoid the clutters

• Make important elements prominent

• Avoid to mix multiple tasks into one UI.

• Balance ease of use and ease of learning based on 80/20 rule.

• Visualize information where suitable

• Provide a low-risk environment. Low-risk encourages exploration and learning 1.

• Provide guidance to users.

• Provide feedback

• Consistency, Constituency, Consistency

• Etc…


1 Source: Designing with the Mind in Mind, Jeff Johnson


Create a clear visual hierarchy

• The more important something is, the more prominent it should be.

• Things that are related logically should be also related visually.

• Things are “nested” visually to show what’s part of what.

Source: Don’t make me think, Steve Krug


Create a clear visual hierarchy

• Visual hierarchy lets people focus on the relevant information

Create a Clear Visual Hierarchy

Organize and prioritize the contentsof a page by using size, prominence,and content relationships. Let’s lookat these relationships more closely.The more important a headline is,the larger its font size should be.Big bold headlines help to grab theuser’s attention as they scan theWeb page. The more important theheadline or content, the higher upthe page it should be placed. Themost important or popular contentshould always be positionedprominently near the top of the page,so users can view it without having toscroll too far. Group similar contenttypes by displaying the content in asimilar visual style, or in a clearlydefined area.

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 positionedprominently 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 clearlydefined area.

Find the advice about prominence in each of these displays. Prose text format (left) makes people read everything. Visual hierarchy (right) lets people ignore information irrelevant to their goals.

Source: Designing with the Mind in Mind, Jeff Johnson


Clear structure makes UI intuitive

example:www.CNN.com

The page is divided into several groups like “ FT companies News”, “ FT Markets News”, “CNN Money”, etc. They are visually separated. It provides a clear structure to users.

So user can quickly SCAN the page.


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 areasDividing the page into clearly defined areas is important because it allows users to decide quickly which areas of the page to focus on and which areas they can safely ignore. – Steve Krug

• Use scannable layoutUse paragraph , headlines, lists, bullet points ,boxes and bold text to make your page easily scannable.

• Provide clear visual cluesVisual clues provided by the design of UI elements, controls, and screen areas inform users of the relationships between elements and which elements belong to logical Combinings.

1. Source: Don’t make me think, Steve Krug


Make it quick to scan and find – example

example: Microsoft Excel 2007 The titles of screen, area or group indicate the purpose of the respective interface element.

example: www.cnn.com


Make it quick to scan and find

example: www.adobe.com

In Adobe’s website, the list under menu is long. So it has been divided as 2 groups with titles ( INDUSTRIES, SOLUTOINS )

Although this is just a minor detail, but it provides a clear structure to user and make it quick to find.

Tip: if the list in UI is long, think about categorizing it as groups.


Tell user where they are

Breadcrumb can help users know his location in the website's hierarchical structure in order to possibly browse back to a higher level in the hierarchy

eBay > Fashion > Women’s ClothingExample: Breadcrumb


Less is more

Less is more

Focus on the essential, yet reveal additional detail as needed.

.


Use progressive disclosure

Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone1

1. source: Progressive Disclosure, Jakob Nielsen 2.Source: Top Guidelines Violations, Microsoft

Progessive DisclosureProgessive Disclosure

ProgessiveDisclosureProgessiveDisclosure

avoid pushing overwhelming information to user

Use More/Fewer progressive disclosure buttons to hide advanced or rarely used options, commands, and details that users typically don't need.

Don't hide commonly used items, because users might not find them. But make sure whatever is hidden has

value 2.


Reduce the amounts of choices

Reduce the number of choices presented at any given time1

1 Source: Office 2007 Design Tenets, Microsoft 2Source: 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 clutter

• Eliminate unnecessary elements on UIA design isn’t finished when there is nothing more to add, but when there is nothing left to take away

• Hide rarely used features/buttons

• Display information on demand through patterns like hover control

• Avoid too much text on UI

• Use icons where suitable

• Avoid using too many boxes on UI

• Use white space

• Try to use minimal color

One of the great enemies of easy-to-grasp pages is visual noise…

Steve Krug


Omit needless things

Hide unnecessary elements


Hide less used tasks (80/20 rule) – example

Less Vs More

By default the advanced options remain hidden until user needs them.

In a nutshell, hiding less used elements can make the UI clean and clear and reduce the distraction.

example: www.linkedin.com


Hide less used tasks (80/20 rule) – example

In spite of more clicks, less-used tasks are placed in Actions dropdown menu.

This make frequently-used task more prominent and also reduce the clutter.

Example: Yahoo Mail


Save screen space – Hover Control

Use Hover controls:

UI might look busy if too many options are shown at once. But hover Control can reduce the visual noise effectively.

In this example, Links like Reply, Retweet are hided by default. Instead, they are only visible when mouse over the message.

Note: Hover Control may not be immediately obvious to a new user, so make it easier to be found. In this example, they are visible when mouse roll over a certain area, even if the mouse pointer is outside the links area. So make the trigger zone bigger.

Example: www.twitter.com


Save screen space – Hover Control

In this example, Play button is only shown when mouse over. The text on the button provides user a clear hint.

example: Apple iTunes


Save screen space – Overlay

In some cases, user just want to take a QUICK glance at information. In-place modeless overlay is a good option for short and quick information. In this example, just mouse over the link, an overlay will appear. The overlay will disappear after mouse away.

It allows user to stay on the same page and user doesn’t need to jump to a separate page. It simplifies the UI and saves screen real estate.


Save screen space – Accordion

An accordion (or accordion menu) is a grouped set of collapsible panels that provides access to a large number of links or other selectable items in a constrained space.

Each inlaid panel may be individually expanded (usually leaving the rest collapsed)…

Use when the number of options is large, the space is constrained, and the list of items can be logically grouped into smaller, roughly equal sized chunks.

Source: YUI, Yahoo

Accordion Pattern


Save screen space – Carousel

Use the carousel to save screen real estate

• when you have a large set of items to show, but want to let the user concentrate his or her attention only on a select few items at a time

• when you do not have enough space to show all items at once.

• when you want to tease the user by letting him or her know that there are more items available than what is currently shown.

• when you have highly visual items to represent such as movie posters, album covers, products etc.

Source: Carousel, UI Patterns

http://ui-patterns.com/patterns/Carousel


Save screen space – Navigation Menu

The user needs to navigate among sections of a website, but space to show such navigation is limited. Drop-down menus save space. This is the main reason for using them. Otherwise, drop-down menus are not regarded as a technique that increases usability, as they can often be difficult to use.

Source: http://ui-patterns.com

Too many labels usually result in busy interface. Stripping away those labels will make interface cleaner.

Don’t misuse icons which might bring about usability issues once used inappropriately.


Sometimes use icons instead of text

example: iTunes

Users can switch to different views like list view, grid view, etc by clicking on these icons.

These icons are better choice than text in this example. They reduce the clutters on UI.


Make important elements prominent

• Make essential data, essential functions, and critical options directly visible on screen.

• Visual salience can capture user’s attention and implicitly give user a hint. You can use the following items to emphasize the important elements.

Bigger font

Image

Icon

Contrast

Color

….


Make important elements prominent – examples

Example: www.yammer.com

This is very popular practice in web. In this example, the primary action is Subscribe. It’s a yellow button which is much more prominent than the other links.

Example: www.youtube.com

In Yammer, you can follow somebody like Twitter. Yammer uses a big blue button instead of link for this important command.


Avoid using too many boxes

• Too many lines and edges clutter up the screen and distract users from the real information.

• White space separates groups without producing visual noise.

Old designNew design

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


Visualize where possible

A picture is worth 1000 words


Visualize where possible

You can try to use the graphical UI. E.g.

• Use Process Map or Diagram

• Use Chart to visualize information

• Use thumbnails

• Use metaphor. e.g. icon

Note:

1. Free-style UI with rich graphics often increases development costs dramatically. It’s usually expensive in terms of the change.

2. The UI with rich graphics might be intuitive to the beginner but it might be less efficient for long term usage cases.

Microsoft Windows 3.x File Manager


Visualize where possible – example

Microsoft Windows 7 (The used space/ free space of disks is visualized)

Which one is better ?

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



Delete

Print

Calendar

1 Source: Simplifying for Usability, SAP



In PowerPoint the available choices are shown by the pictures instead of text. It makes UI more intuitive and more direct. Users don’t need to imagine or guess the meaning of the text.

In this dropdown list from PowerPoint, the available choice of fonts are visualized. This makes UI very intuitive.



thumbnails

Thumbnails can provide the graphical overview of objects like pictures, movies, reports, etc.



Diagram or process map

It can help user get a quick overview of the process or system.

Tips: you can use diagram to illustrate the complex process.

example: Zoho Invoice


Provide guidance to user

Steep learning curve will frustrate user. Users, esp. beginners, strongly need the guidance.

• Standard help is not enough

• Provide Video Tour or Tutorials if possible

• Give user a hint or short instruction on UI

• Use self explanatory terminology, on-screen text, info-tip

• Educate with examples

• Provide thoughtful defaults

• Etc…


Guide users – standard help

Knowing how to perform tasks reduces its inherent complexity.

• Standard Help is not suitable for the beginnerStandard 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 helpTo 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 Cooper2. source: About the face 3, Alan Cooper

“ Knowledge make everything simpler ”


Guide users – Demo

“ Very few people take the time to read instructions 1.”

1 Source: Don’t make me think, Steve Krug

example: SlideRocket

Online video/tutorial can help user quickly understand the system. If your system is inherently complex, you can think about offering a quick tour of system.


Guide users – hint or instruction

Terminology , onscreen text and Infor-tip

• Use user-focused language.

• Avoid jargon.

• Avoid abbreviation.

• We learn faster when vocabulary is task-focused, familiar, and consistent1

• Keep the text short and simple. Omit needless words.

• Design text for scanning, not immersive reading 2

• Shall be self-explanatory.

Get rid of half the words on each page, then get rid of half of what’s left.

krug’s third law of usability

1. Source : Designing with Mind in Mind, Jeff Johnson2. Source : How to Design a Great User Experience, Microsoft



For task that is long or very complicated , you can think about using step-by-step instructions (especially in wizard form) to reduce the learning curve.

Wizards is an effective way to guide users and to keep them informed.

However, wizard might become frustratingly rigid and cumbersome once after users are familiar with the task.

So in many cases wizard might not be suitable for the frequently-used tasks which require the efficiency.



Start Page can be used as the initial guidance to novice user.

In Visual Studio, Start Page is a launch pad where• shortcut of main tasks are provided so user can immediately start the application. • Getting-Started, supporting information, etc are provided as well.

Guidance page might be annoying to skilled users. So user shall have an option to dismiss it.




The guidance information is provided in the initial state/blank state.

Once user click on the button, the guidance information will disappear in this example. The page will switch to another state ‘Time Tracking’. It will never show again.

example: BaseCamp



Remember: Too much text leads to the visual clutter.

Be cautious to use on-screen instructions ,esp. long text ,on the frequently-used UI.

But sometimes onscreen instruction is necessary on UI of rarely-used tasks.



In this example the information tips are displayed only after the mouse focus is active within the input field.

This effectively reduces the visual clutter and make UI clean.

Before

After



The tips are a powerful technique to simplify UI.The tooltips / info-tips provide information users need when they need it. They can help you use screen space more effectively and reduce screen clutter.



Pre-fill a text field or dropdown with a prompt that tells the user what to do or type. It helps make the UI self-explanatory. Choose an appropriate prompt string, perhaps beginning with one of these words:

• For a dropdown list, use Select, Choose, or Pick.• For a text field, use Type or Enter.

Source : Designing Interfaces, Jenifer Tidwell

Example: Input Prompt


Guide users – Sample Content

Sample content can help the novice users learn the system.

example: Zoho Invoice


Guide users – Thoughtful Defaults

example: Print dialog in PowerPoint

Instead of letting user choose among several values that he doesn’t understand before starting to work, provide a thoughtful default value which works for most users.

If a setting has a value that applies to most users in most circumstances, and that setting is both safe and secure, use it as the default value. Don’t assume user will configure the value to meet their needs. Keep it in mind: most of users are lazy.


Guide users – Pre-defined default

.

.In PowerPoint, some default themes have been provided to user for the quick application.

In Excel , some pre-defined Table Styles are shipped. This will help user quickly use it.

example: Microsoft Excel 2007

example: Microsoft PowerPoint 2007


Guide users – structured approach

Search result can be narrowed down by filters. Actually it’s sort of visual presentation of the conditions. Refining search guides the user visually towards his goal.

• Transition can make visual connections between visual states

• Transition could bring about the rich and nice experience


Use Transitions as design elements

Transition effect is now becoming more and more popular. It can elicit positive emotion if used properly . On the other hand, it can be also used as an effective technique to simply UI.

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. “- Source: Microsoft


Use 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


Make it discoverable

example: Microsoft Visual Studio 2010

In Visual Studio, there is a tiny arrow on the border of control. Clicking on it will open its contextual menu.

This small arrow is a visual hint to user. It is an effective technique to improve discoverability.


Provide feedback to user

Feedback is giving a user clear indication that something has happened, is happening or could happen.

• Users shall be able to track their progress and status

• Provide immediate feedback ( e.g. success, erros, and status information )

• Provide Modeless Feedback1

1 source :About Face 3, Alan Cooper

When saving a PowerPoint file, the feedback is not displayed in a dialog. Actually it’s modeless in that this information is always readily displayed, requiring no special action or mode shift.


Be consistent

Consistency makes an application easier to learn and use.

Note: consistency is not a goal – it is just a "rule of thumb" in order to achieve simplicity. Sometimes for some specific cases inconsistent UI is better.


Use pattern-based design if possible

• It helps ensure the consistency across the modules

• It helps user to quickly build mental mapping

• It reduces the needs for users to rethink and remember

• It reduces the development effort and maintenance cost

Note:

Pattern-base design is a good approach to achieve simplicity, but it’s NOT the panacea for every cases. In some specific cases, free style design is much better than pattern-based design. Regarding free-style design, keep the following principles in mind:

• Use familiar paradigm and conventions• Be cautious to invent new building block• Free-style design might be expensive to upgrade or maintain in large-scale business application.


Simplify UI from every dimensions :: Efficiency




About the efficiency

Usually Efficiency is conflicting with Learnability. Good balance requires thoughtful analysis.

• Make everything as automatic as possible

• Shift the complexity to system and Reduce the efforts from user's side

• Reduce the number of steps to accomplish a task

• Use Parallelism. Typically it makes applications more efficient, but it also increases complexity. Be careful to use parallelism.


Help Users Form Habits

Humans form habits after repetition; it is our natural tendency to learn tasks to the point where they become automatic.

- Jef Raskin

No conscious thinking

High frequency repetition of tasks can lead to “automatic” execution1. The user no longer needs to think consciously about these actions.

Be cautious to use dynamic UI for main framework. It’s difficult for user to form habit as the UI is not fixed and often changing. In order to help user to develop habit, it’s important to create a stable and consistent working environment. For example: Reserve a permanent area for main navigation buttons.

？

Source: What Does Cognitive Psychology Tell Us about Users?, SAP


Leverage the habit and don’t let user think

• Humans form habits after repetition; it is our natural tendency to learn tasks to the point where they become automatic. [Jef Raskin]

• Create stable structure:An application should provide a stable and familiar working environment. The stable and consistent structure can help user build up the habit.

Give features a permanent home. Prefer consistent-location UI over “smart” UI 1

• Visually salient elements can accelerate the action.The salient elements lead to quick recognition and user don’t need to think about it. In the end this will increase the efficiency

Submit Cancel

Source: 1.Office 2007 design tenets, Microsoft


Apply Fitt's law

Use large objects for important functions (Big buttons are faster)1.

The larger we can make the clickable area of the objects, the easier they will be to click on.

1. source: First Principles of Interaction Design, Bruce Tognazzini


Enable keyboard shortcuts (E.g. Ctrl C, Ctrl V)

example: Microsoft Visual Studio 2010

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. [Jakob Nielsen]

http://www.useit.com/jakob/


Directly accessible

Always-Visible Tools:

As the tools are always shown, they are easy to find. On the contrary, they add visual noise to the user interface. Always-Visible tools should be used when discoverability of the tools is important. When the tools contain secondary, less important actions, consider using Hover-Reveal Tools instead 1.

example: Google DocsAdd document as Favorite

1 Source: Carousel, UI Patterns

http://ui-patterns.com/patterns/Carousel


Direct manipulation- Drag and Drop

Rich visual feedback is the key to successful direct manipulation. [ Alan Cooper,etc ]

example: iGoogle


Command line UI

User can use the command line UI to perform a certain task. This can be convenient to expert user.

In this example, user can type “msconfig” to open System Configuration dialog.

example: Windows 7


Batch actions

example:Adobe Photoshop – Actions This can increase productivity pretty well

In Adobe Photoshop user can automate the repetitive task by Action. Action is a series of tasks that you play back on a single file or a batch of files—menu commands, tool actions, and so on. For example, you can create an action that changes the size of an image, applies an effect to the image, and then saves the file in the desired format.


Auto complete – Code-hint

Once user types the keyword, e.g. MouseEvent. , a menu will appear automatically to allow user to choose the relevant value. In case user forget the syntax, this help novice user find the right one. This is not only efficient, but also ease user’s memory burden.

example: Adobe Flash CS5


Auto-suggestion

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. Source: Designing Web Interface, Bill Scott and Theresa Neil

example: Hotmail


Auto-suggestion

example: Search people in LinkedIn

Once user types the initial letters of the key words, e.g. “Te” in this example, a dropdown menu containing the possible search result is presented automatically.

Auto-suggestion can enhance the efficiency.


Script, Rule, Macro, Formula

example: Define Rule in Microsoft Outlook

In Outlook user can define a rule. Once the condition is met, system will automatically perform the task.

The approaches like Rule, Formula, Script, Macro are very powerful means.

Use shortcuts like My Favorites, quick links, desktop shortcut, Recent Documents, etc


Quick navigation – Shortcut

example: Launch Page of Adobe Flash example: Explorer in Windows 7


Quick navigation – Tag Cloud

Tag Cloud can not only help user quickly perceiving the importance of each subjects , but also be used as navigation aids


Quick preview

When using the scrollbar, a thumbnail of the page will appear along the scrollbar. This quick preview features help user quickly navigate the target pages.example: Adobe Acrobat Reader


Quick preview

In Youku user can preview the movieclip by mouse over the timeline


Real time feedback

example: MS Office Live Preview

React Immediately

In Microsoft Office you can preview formats, fonts, and styles before you apply them. The Live preview features enhance the efficiency considerably.


Real time quick view

The corresponding large image is displayed Immediately when mouse over the thumbnail even without the click. This makes the interaction efficient.

Although it’s just a slight detail but it make the difference.

Example: Amazon.com


Stay on the page – Inplace Editing

example: Flickr Inline Edit

This example is from Flickr. Once user clicks on the title of picture, an editable textbox with buttons will appear. So user can edit the title in the original place.

In-place editing is to edit the content where it lives. Without going to another pop up window or new page for editing, in-place editing help user keep focus on the original page. The task flow will not be broken.


Stay on the page – Overlay

An overlay is a mini page in a layer on top of a page. Overlays simplify the user interface and help user stay on the current page without losing the context1.

• Simplifies the UI and saves screen real estate

• Allows the user to stay on the same page and avoids the page jump.

• Keeps the context.

• Get user’s attention.

1 Source: http://www.patternry.com/p=overlay/

Comparing the traditional dialog, the new style of modal overlay can be easily dismissed either by click on close button or clicking outside the overlay. This is very efficient .

However, don’t misuse overlay because modal overlay has the disadvantage. It can interrupt the flow of interaction.

Just use it in the suitable cases


Stay on the page – Overlay example

example: FaceBook

Clicking on the thumbnail will display the full-blown picture in the overlay rather than in another separate page.

Example: facebook


Provide different perspectives

Information can be presented and viewed from various perspectives. This can meet different needs and efficiently help user find the desired “answer”.

Pivot Table is a good example.


Provide different perspectives – example

Support user to view/play with objects from different perspectives.

User can view the same object from different dimensions.

example: Google Map



example: www.Alibaba.com

Provide user the different views which can meet different needs.

In this example, user can switch the view for the same content.



Provide user the different views which can meet different needs.

In this example, user can switch the view for the same content.

example: apple iTune


Overview & Dashboard

Consolidate key information from different sources into ONE page

example: mint.com


Search Mode Vs Browse Mode

Both modes shall be provided in applications.

Browsing is the structured way to find the information.

Searching is the non-structured and efficient way to find the information

Searching is a very fast way to find the information.


Shift the complexity to the system


When dragging the control near a position that would align with another control or set of controls, the snapline automatically appears. Snaplines give you an accurate and intuitive way to align controls on the windows form.

Without the snapline, precise placement of controls on the form will be a painful and time-consuming task. Snapline is very simple and efficient !


Simplify UI from every dimensions :: Memorability




Ease memory burden

• Magical 7 ± 2 : Our Capacity for processing information is limited

• People can't keep much information in their short-term memory1

• Memory recall deteriorates with time

• Recognition is easier than remembering (recall)2.

“ Recognition rather than recall ” 3

1 Source: Short-Term Memory and Web Usability, Jakob Nielsen2. Source:Simplifying for Usability, SAP3 Source: Ten Usability Heuristics, Jakob Nielsen


How to reduce user’s memory load?

• Good organization of information (chunking, clustering, categorizing) leads to better remembering1.

• Use various tricks to ease memory load

• Pictures are powerful means for remembering and recognition

• Auto-suggestion

• Auto-completion

• Recent history

• Reminder and notification

• Etc…


Leverage picture’s power

• Pictures plus text are remembered best 1.

• Pictures are remembered better than text alone2.

• Picture are extremely well recognized3

1.2.3. Source: Simplifying for Usability, SAPWhich one is better ?


Auto completion – example

Before

After – example 1 After – example 2


Auto suggestion – example

Not only for sake of efficiency, Auto Suggestion is also sort of recommendation and can ease memory load.


Recent history – example

• Remember last state

• Record recent actions / History

Recent list/history is automatically recorded in PowerPoint. Users can quickly find the recent documents.


Recent history – example

example: Amazon

Use the pattern creatively ! This example shows how Amazon smartly uses RECENT HISTORY to help users for online shopping.

After visiting many items on the different pages, users might lose the visited information. Because the recent history is automatically tracked in the system, so user can very easily navigate back to the information they are really interested in.


Reminder – Created by system

Reminder created by system

The automated reminder can make work much easier for users. As a very powerful technique, Reminder can ease pain from the heavy memory load. Used innovated, it can make big difference.

For example, one month before the expiration date of every employee’s contract, the system will automatically trigger the reminder to HR to renew or terminate the contract.


Reminder – Created by end user

Reminder created by User

Users can set up their own reminder. They can control how to create the reminder. In Outlook, user can set up the reminder by themselves.


Simplify UI from every dimensions :: Errors




The tolerance principle

1source: Software for use, Larry Constantine and Lucy Lockwood

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 actions1.

Address error at different stages:


Before error happen

Before After

×

Before error happen

Expect users to make errors when designing screens

Try to anticipate where they will go wrong

Provide good default values

Provide warning

Provide preview before taking actions

Use constraint to prevent the error

Error happens


Provide Warning

Preventing error is much better than just recovering from it

Alarm to warn against dangerous actions


Provide preview before taking the action

MS Office -Print Preview Adobe – Filter effect Preview

Before users commit the action for the changes, the preview function can help them get a glimpse of what’s the would-be result.

This can avoid unwanted consequence.


Use constraint to prevent the error

example: MS PowerPoint 2007

In order to avoid the error, some action buttons shall be disabled once they are not available.

USB cord will fit into only a particular slot on this laptop.

Address error at different stages:


After error happened

Before After

×Error happens

After error happened:

Provide constructive feedback.

Make actions reversible when possible

UI shall be tolerant


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 – example

Provide reversible actions. User can undo the action.

example: MindMeister

Every actions are automatically recorded online and Save action is no longer needed. User don’t need to worry about data loss. The actions can be reversed.


Make actions reversible – example

User can undo the actions easily.

Every actions is automatically recorded in history.

The history panel in Photoshop allows user go back to the previous state.

User might make mistake. UI shall be error-tolerant.


UI shall be forgiving

In case user makes the mistake. The system shall help them correct the error by smart way. For example, once user mistypes a word, the potentially correct results will be automatically displayed in Google Search.


Simplify UI from every dimensions :: 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

• Attractive things work better

“ 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


Balance Joy of use and Ease of use

Looks simple and elegantLooks complicated

Case study: aesthetic and minimalist design

:: Good design means that beauty and usability are in balance1 ::

1 Source: Emotion & Design: Attractive things work better ,Don Norman


Adapt UI to suit each individual user's needs

example: Outlook 2007

User can change some settings. For example, users can change the location of the Reading Pane and resize the reading pane.

Reading Pane at the right side Reading Pane at the Bottom


Don’t make user wait

Source: The Laws of Simplicity, John Maeda

Savings in time feel like simplicity1

Performance is a very critical factor !




Technical Design



Requirement

Design


Design > Technical Design

Hide internal complexity to users

• Obtaining simplicity while preserving power often requires significant internal complexity. ( Alan Cooper)

• UI is the 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

Google Search looks simple but the backend system is complex. The semantic analysis algorism is the key to Google Search’s simplicity.


Performance, Scalability, Extensibility

• Performance and scalability are the keys.

• Offer the customer flexibility to customize the system. For example, providing open API.

• Technical simplicity:

o The software needs to run all the tests.

o Clarify of codes.

o No duplication of codes.


Refactoring over releases

• It’s almost impossible to precisely predict the future requirement and changes.

• Re-factoring architecture and overhauling solution could be a reasonable option after a couple of releases, but large refactoring is very costly.

ABOUT US >>

Terry WangUX Designer, Amazon

http://cn.linkedin.com/in/terrywang

Jim LiangSenior UX Designer, SAP

http://cn.linkedin.com/in/jimliang

http://cn.linkedin.com/in/terrywang

http://cn.linkedin.com/in/jimliang

Appendix

What does "Simple" Mean?

Source: Simplifying for Usability, SAP

Appendix

What does “Powerful” mean ?

EnablingThe application satisfies the needs of its target users, enabling them to perform tasks that they couldn't otherwise do and achieve their goals effectively.

EfficientThe application enables users to perform tasks with a level of productivity and scale that wasn't possible before.

VersatileThe application enables users to perform a wide range of tasks effectively in a variety of circumstances.

DirectThe 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, Microsofthttp://msdn.microsoft.com/en-us/library/aa511332.aspx

Simplifying for Usability, SAPhttp://www.sapdesignguild.org/resources/simplification/index.htm

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition, Steve Krughttp://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 Maedahttp://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 Fadeyevhttp://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 Croninhttp://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111

Progressive Disclosurehttp://www.useit.com/alertbox/progressive-disclosure.html

http://msdn.microsoft.com/en-us/library/aa511332.aspx

http://www.sapdesignguild.org/resources/simplification/index.htm

http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=sr_1_1?ie=UTF8&qid=1288002208&sr=8-1

http://www.slideshare.net/cxpartners/secrets-of-simplicity

http://www.amazon.com/Laws-Simplicity-Design-Technology-Business/dp/0262134721/ref=sr_1_1?s=books&ie=UTF8&qid=1288002290&sr=1-1

http://www.webdesignerdepot.com/2009/02/7-interface-design-techniques-to-simplify-and-de-clutter-your-interfaces/

http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111

http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111

http://www.useit.com/alertbox/progressive-disclosure.html

References

Error Messages, Microsoft

http://msdn.microsoft.com/en-us/library/windows/desktop/aa511267.aspx

User Experience Design Principles, Microsoft

http://msdn.microsoft.com/en-us/library/windows/desktop/dd834141.aspx

Designing with Windows Presentation Foundation, Microsoft


Top Guidelines Violations, Microsoft


How to Design a Great User Experience, Microsoft


Sites as Collections of Pages, Microsofthttp://channel9.msdn.com/Learn/Courses/SharePoint2010Developer/UiEnhancements/SitesasCollectionsofPages

Microsoft Solution Framework, Microsofthttp://msdn.microsoft.com/en-us/library/dd380647.aspx


http://msdn.microsoft.com/en-us/library/windows/desktop/dd834141.aspx





http://channel9.msdn.com/Learn/Courses/SharePoint2010Developer/UiEnhancements/SitesasCollectionsofPages

http://channel9.msdn.com/Learn/Courses/SharePoint2010Developer/UiEnhancements/SitesasCollectionsofPages

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 Byhttp://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 Patternhttp://www.patternry.com/

Six And Half Philosophies for Design & Innovation, Alex Zhuhttp://www.slideshare.net/mylonelyhouse/six-and-half-philosophies-for-design-innovation-presentation

Multitier architecturehttp://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/

http://www.time-tripper.com/uipatterns/Introduction





http://3.7designs.co/blog/2010/07/ten-laws-to-design-by/



http://www.patternry.com/

http://www.slideshare.net/mylonelyhouse/six-and-half-philosophies-for-design-innovation-presentation

http://en.wikipedia.org/wiki/Multitier_architecture

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 2http://www.flickr.com/photos/gee01/871748702/

Photo Credit: grocery shelf

http://blog.authenticfoods.com/wp-content/uploads/2010/08/Henrys-Grocery-Shelves.jpg







http://www.amazon.com/Inspired-Create-Products-Customers-Love/dp/0981690408/ref=sr_1_1?ie=UTF8&qid=1325320164&sr=8-1

http://www.flickr.com/photos/gee01/871748702/

http://www.flickr.com/photos/gee01/871748702/

http://blog.authenticfoods.com/wp-content/uploads/2010/08/Henrys-Grocery-Shelves.jpg

Design Simple but Powerful application

Design

Transcript of Design Simple but Powerful application