Page 1

Simple and Powerful Jim Liang

Terry Wang . Ver

2 0.9


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


Users hate complexity

We

Simplicity


But simple is not the only one criterion If ease of use was the only valid criterion, people would stick to tricycles and never try bicycles. Dr. Douglas Engelbart Inventor of Mouse

To drive fast, which one is better?

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.


People want powerful products

Powerful Product


But powerful usually means complicated

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


Can we have both?

SIMPLE

POWERFUL

There is a natural tension between the two.


Different product types have different focus

l Powerfu Simple

Consumer products tend to compete on ease of use while enterprise products still compete on features and functions.


Different focus based on target market

Professional Application

Instagram

Adobe Photoshop

• Limited functionalities • Easy to learn and use • Aimed at non-professional users

• Rich functionalities • High learning curve • Mainly aimed at professional users


Extremely complex UI works really well in extreme cases

Figure: Airplane cockpit


Different modules/tasks have different priorities Even in the same application, priorities are different.

Routine & Repetitive tasks Efficiency is the focus

Occasional Tasks Ease of learning is the focus


What factors could result in complexity?

• Complex requirements (edge cases, invalid requirements) Requirement

• Complicated processes and task flows • Many roles involved in the business scenarios • Many dependencies between functions and processes • Feature creeps


Design & Implementation

• Bad solution architecture • Lousy UI design • Messy technical architecture • Technical constraints • Conflicting interests in development team • Compromise in the team • etc…


Balancing the conflicts

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


1 Source: Powerful and Simple, Microsoft


HOW


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


Case Study: Simplify the control How to simplify the remote control?

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


Case Study: Simplify the control Remove features


Case Study: Simplify the control Hide features


Case Study: Simplify the control Group features


Case Study: Simplify the control Displace features

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


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% 55%

45% of delivered features are never used.1

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


Crappy requirements lead to crappy products

Rubbish In

Rubbish Out Long time development


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

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


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

Talk to the real users

Proxies IT managers, CIO, Marketing, etc

End User


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


Optimize business processes •

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.

Streamline Task flow


Prioritize requirements Prioritize use cases by Importance of Scenarios & Frequency of Use Importance

1 7

6

2

Use Cases Example:

5 3 8

1x/Year

1x/0.5year

1x/Month Frequency of use

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

4

1x/Week

1x/Day


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 1

reduction . •

Make hard decisions instead of making everything optional or configurable.

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

1. Source: The Laws of Simplicity, John Maeda


Example of thoughtful deduction

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.


Think big, start small

Skinny System

Full Fledged System


 Start to build a skinny system, add muscles in later steps1.

1 Source: Be Smart! by Ivar Jacobson


Example of “ Think big and start small �

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.


Improve the product iteratively

Q: How to know what the essential requirements are? A: Ship the product and listen to what customers say.

Source of Diagram: MSF, Microsoft


Address diverse requirements via Layering low

high

UI

Personalization Let end users adapt the UI

Flexibility and cost for change

User-friendly

Rule, Script, Template, Configuration, etc

Code/API

Code

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 * high

low

Help users adapt as the business changes and grows

* Platform strategy might be only suitable for big players.


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



Automation

Manual Data Entry

Bar-Code

RFID No UI needed to input data!

The best UI is no UI

Source of concept : Dan Rosenberg, SAP


Automation – Workflow

Figure: Oracle Workflow Builder

Workflow reduces human efforts on routine tasks.


Automation – Notification

Actionable notifications has become a standard mechanism in modern systems.


Automation – Rules

Figure: Microsoft Outlook

Setting up a rule for once and it will do the work automatically afterwards.


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


Balance the workload – Centralized approach

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


Integration

B

A

C

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


Integrating devices

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


Integrating services

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


Offer collaboration capability

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


Example: SAP Business ByDesign

• 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)


Leverage intelligence 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. 2. 3. 4.

Query, Reporting and Analysis Scorecards, Dashboard and Real-time monitoring Text mining Data mining

3. Collective Wisdom 1. User’s voting, review, recommendation 2. Expert’s view 3. Co-creation (e.g., Wiki)


Technology simplifies the solution

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.


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

Different user types

Professional User

Administrator / Power User / Key User


Users will not always remain as beginner

? Which one is more important?

Easy to Learn

Efficiency

Designer’s Dilemma

The learnability (easy to learn) is often in conflict with the efficiency. How to balance them is a constant challenge to designers.


Intermediates are the mainstream Most users are intermediates.

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.

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


POP Model

Simplicity depends on how you organize information into meaningful chunks/units.

Pr

ior it

ize

e niz ga Or UI DESIGN

Present

POP UI Design Model 
 Prioritize, Organize, Present


Prioritize Information

If everything is important, nothing is.

Pr

ior it

ize

e niz ga Or UI DESIGN

Present

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

Pr

ior it

ize

e niz ga Or

Organize the information in a way that is logical and meet user’s expectation.

UI DESIGN

Information architecture is commonly used to describe the structure/shape of the information. Present


Figure: Information architecture of the library of University Duke


Organize Information – Separation Divide each difficulty into as many parts as is feasible and necessary to resolve it. Rene Descartes Philosopher, mathematician and writer

Most human beings can only concentrate on one thing at a time. Jef Raskin HCI expert, starter of the Macintosh project

Note: Separation can make complex tasks feel simple. However, it could result in more clicks and usually less efficiency, even discoverability issues.


Figure: Windows new network connection wizard

Wizard breaks a complex task into several steps. Each step is presented in a separate screen.


Figure: AGF website

Information on the same screen can be further organized into logical groups.


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:

Pr

ior it

ize

e niz ga Or UI DESIGN

Present

• • • • • • • • • •

Text Picture, video, diagram, illustration, sound Table Chart Form Tab Toolbar Accordion Carousel …


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


Usability is defined by 5 quality components:

Learnability

Efficiency

Memorability

Errors

Satisfaction

Source: Introduction to Usability, Nielsen Norman Group


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

Reduce the number of choices presented at any given time.1 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.

1. Source: Office 2007 Design Tenets, Microsoft 2. Source: The Paradox of Choice, Barry Schwartz


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

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.


Use white space 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.


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

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

1. Source: Progressive Disclosure, Nielsen Norman Group 2. Source: Top Guidelines Violations, Microsoft


Progressive Disclosure

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


Progressive Disclosure

Figure: Google Plus

Initial state

Mouse hover

Mouse click


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 directly manipulates the objects on the screen

In this example user has to control indirectly the UI elements through pressing the physical keys

1. Source : Designing with Windows Presentation Foundation, Microsoft


Visualize

A picture is worth 1000 words

Image: http://en.wikipedia.org/wiki/A_picture_is_worth_a_thousand_words


Visualize — Numbers

Microsoft Windows 3.x File Manager

Microsoft Windows 7 File Manager


Visualize — Icons 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


Visualize — Previews

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


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, 1 and beginners don’t need reference information; they need overview information, such as a guided tour.

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 2 be fixed into the interface. It must know how to go away when its services are no longer required.

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.

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 Johnson 2. Source : How to Design a Great User Experience, Microsoft


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.


Guide users – Tooltips

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

Source: 1.Office 2007 design tenets, Microsoft


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 about:flags in the Chrome address bar to bring up the configuration window.

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.


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


Facilitate users — Script, rule, macro, formula

When the conditions of a rule is met, actions that are defined by the user will be taken automatically.


Facilitate users — Content preview

Adobe Acrobat Reader will display a thumbnail as user scroll to help user quickly navigate through the pages.


Facilitate users — Inline editing

Flickr inline editor let user focus on the screen and won’t break the task flow.


Facilitate users — Provide different views

The Calendar app in iOS 8 provides different views to look at appointments.


Facilitate users — Consolidate information

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


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


Make information more visible

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

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

Terry Wang

Senior UX Designer, SAP http://cn.linkedin.com/in/jimliang

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


How to design simple but powerful application?  

Designer is constantly confronted with challenge that how to make the application simple but also powerful. Powerful features will usually m...

Advertisement
Read more
Read more
Similar to
Popular now
Just for you