Design Simple but Powerful application
Upcoming SlideShare
Loading in...5
×
 

Design Simple but Powerful application

on

  • 7,775 views

Designer is constantly confronted with challenge that how to make the application simple but also powerful. Powerful features will usually make the user interface complicated. How to simplify it ...

Designer is constantly confronted with challenge that how to make the application simple but also powerful. Powerful features will usually make the user interface complicated. How to simplify it without sacrificing the powerfulness ?

This slides is intended to address the challenges from both product management and user experience design perspectives.

Statistics

Views

Total Views
7,775
Slideshare-icon Views on SlideShare
7,761
Embed Views
14

Actions

Likes
16
Downloads
204
Comments
0

3 Embeds 14

https://twitter.com 9
https://si0.twimg.com 3
http://www.techgig.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

Design Simple but Powerful application Design Simple but Powerful application Presentation Transcript

  • Simple But PowerfulJim Liang Terry Wang
  •  Part 1 :: About Simple and Powerful Part 2 :: Deep Dive – How to address the challenges ?
  • About Simple But PowerfulUsers hate complexity We Simplicity
  • About Simple But PowerfulBut “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 effiency.
  • About Simple But PowerfulCustomers want powerful products Powerful Product
  • About Simple But PowerfulBut “powerful” usually means “complicated” Powerful products have a lot of functionalities and information, but usually it‘s difficult to use, build and maintain. 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.
  • About Simple But PowerfulCan we have both? SIMPLE POWERFUL There is a natural tension between them.
  • About Simple But PowerfulDifferent 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.
  • About Simple But PowerfulCase Study 1 Depends on your target market and target user, choose suitable design strategy. Casual Application Professional Application Google Picnik Adobe Photoshop • Limited functionalities • Rich functionalities • Easy to learn and use. • High learning curve. • Oriented at non-professional users. • Efficiency is the main focus • Mainly oriented at professional users.
  • About Simple But PowerfulCase Study 2 Airplane Cockpit Extreme case: Sometimes complex UI is necessary and it works pretty well
  • About Simple But PowerfulDifferent modules/tasks have different priority :: Even in the same application, the priorities are different :: Routine & Repetitive tasks Occasional Tasks Efficiency is the focus Ease of learning is the focus
  • About Simple But PowerfulWhat factors could result in the complexity ? • Diverse requirements, including many edge use cases • Complicated requirements, even including invalid requirements Requirement • Complicated processes and task flows • Many people are involved in business scenarios • Many dependency between functions and processes • Feature creeps • Bad solution architecture Design & Implementation • Lousy UI design • Messy technical architecture • Technical constraints • Conflicting interests in development team • Compromise in the team • etc…
  • About Simple But PowerfulBalance the conflicting goals Art of Balance You can achieve both power and simplicity through carefully balanced feature selection and presentation1. 1 Source: Powerful and Simple, Microsoft
  • About Simple But PowerfulHow to achieve “Simple but Powerful” ? HOW
  • About Simple But PowerfulTackle 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
  • About Simple But PowerfulCase Study : Simplify the control How to simplify the remote control ? Source: Secrets of Simplicity: rules for being simple and usable
  • About Simple But PowerfulCase Study : Simplify the control - Remove Features Source: Secrets of Simplicity: rules for being simple and usable
  • About Simple But PowerfulCase Study : Simplify the control - Hide Features Source: Secrets of Simplicity: rules for being simple and usable
  • About Simple But PowerfulCase Study : Simplify the control - Group Features Source: Secrets of Simplicity: rules for being simple and usable
  • About Simple But PowerfulCase Study : Simplify the control - Displace Features Source: Secrets of Simplicity: rules for being simple and usable
  • Part 1 :: About Simple and Powerful Part 2 :: Deep Dive – How to address the challenges ?
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial Tips for avoiding feature creep Design Solution Architecture Design User Experience Design Technical Design
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement  Requirements are crucial Tips for avoiding feature creep Design Solution Architecture Design User Experience Design Technical Design
  • Requirements > Requirements are crucialHow many requirements are really valid? How many implemented requirements are actually used during operation? Source: Johnson, J. Keynote speech XP 2002, Sardinia, Italy
  • Requirements > Requirements are crucialEnsure the valid requirements Rubbish In Rubbish Out Long time development
  • Requirements > Requirements are crucialTackle 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
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial  Tips for avoiding feature creep Design Solution Architecture Design User Experience Design Technical Design
  • Requirements > Tips for avoiding feature creepTips for avoiding features creep How to avoid feature 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 See details in the next slides
  • Requirements > Tips for avoiding feature creepDrive design by target users goals • Dont drive the design by feature list. Instead, start the design from understanding and analyzing users 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 Contextual Design  Preferences  Unfulfilled needs  Information needs • Feature list can be a good approach for tracking requirement and product management. However, dont use it as the starting point for design. • Avoid ―me too‖ product strategy
  • Requirements > Tips for avoiding feature creepSay 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 ? ‖
  • Requirements > Tips for avoiding feature creepValidate requirements early talk to the real end users … Proxies End User ( IT managers, CIO, Marketing, etc )
  • Requirements > Tips for avoiding feature creepOptimize business processes • 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. Streamline Task flow
  • Requirements > Tips for avoiding feature creepPrioritize requirements • Prioritize use cases by Importance of scenarios & Frequency of use Importance of Scenario Use Cases: 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 9. Personal drawings 10. Personal Cash Contribution 11. Print Petty Cash Report 12. Configuration for Petty Cash 13. Manual Payment without Reference 14. Print Receipts 15. Closing Petty Cash Periods 16. Do Correction/Adjustment postings 17. Approval on Petty Cash transactions 18. Migration Petty Cash Balances Frequency of use
  • Requirements > Tips for avoiding feature creepFocus on core scenarios • Focus on essentials and what matters. (80/20 rule) • Design for the common case1 • Dont distort the system‘s focus by edge cases 80 / 20 1 Source: Designing with the Mind in Mind, Jeff Johnson
  • Requirements > Tips for avoiding feature creepTry to cut features if possible 1 • The simplest way to achieve simplicity is through thoughtful reduction . • 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. thoughtful reduction 1. Source: The Laws of Simplicity, John Maeda
  • Requirements > Tips for avoiding feature creepThink 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
  • Requirements > Tips for avoiding feature creepFail 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. “How to know what the essential requirements are? ”. Just ship the product early and validate it in the market. Source of Diagram: MSF, Microsoft
  • Requirements > Tips for avoiding feature creepAddress diverse requirements 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.  Generalize the shared functions across application/industry and prioritize them CORE  Build the core first !  The diverse requirements can be addressed by providing capability to extend, customize and personalize the solution .
  • Requirements > Tips for avoiding feature creep Deal with diversity by “Layering” strategy low high UI Personalization Adapt UI by end users Flexibility User-friendly Rule, Script, and cost Template, Configu Extensionfor change ration, etc Enhance functions by Rules, Scripts, Templates, Formula, C onfiguration by IT admin or power user Code/API Customization Customize features by 3rd party partners or customers themselves Code 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.
  • Requirements > Tips for avoiding feature creepCase 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
  • Requirements > Tips for avoiding feature creepCase Study: Force.com 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 example: Create an Approval Process requirements.
  • Requirements > Tips for avoiding feature creepCase 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 ?
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial Tips for avoiding feature creep Design  Solution Architecture Design User Experience Design Technical Design
  • Design > Solution Architecture DesignOverview • 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 See details in the next slides
  • Design > Solution Architecture DesignAutomation Manual Data Entry Bar-Code RFID there is no UI needed to input or access data! The best user interface is no UI Source of concept : Dan Rosenberg, SAP
  • Design > Solution Architecture DesignAutomation 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…
  • Design > Solution Architecture DesignAutomation – Workflow 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 example: Center case. Oracle workflow builder
  • Design > Solution Architecture DesignAutomation – Workflow example: workflow notification Notification has become a standard mechanism in the modern system, including business application, SNS, etc.
  • Design > Solution Architecture DesignAutomation – 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.
  • Design > Solution Architecture DesignAutomation – create a rule example: create a Rule in Excel 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.
  • Design > Solution Architecture DesignAutomation – batch action example: Batch Action In Adobe Photoshop, end user can create ―Action‖ to execute a bundle of tasks automatically.
  • Design > Solution Architecture DesignAutomation – use template example: Use Templates In ZOHO Invoice, user can apply the specific format/layout for the invoice based on the pre-defined template.
  • Design > Solution Architecture DesignBalance the workload Balance the workload between the users. • Centralized management . E.g. system configuration, mass data management • Decentralized management. e.g. employee self-service, interactive dashboard… How to distribute the tasks ?
  • Design > Solution Architecture DesignBalance 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.
  • Design > Solution Architecture DesignBalance 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 user will be much easier. Shift the complexity to advanced users
  • Design > Solution Architecture DesignOffer collaboration capability Collaboration can help a group of users work on the same page and perform their tasks in flexible way. People Collaboration
  • Design > Solution Architecture DesignOffer 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. Example: SAP Business ByDesign Therefore, user can easily monitor KPI, workload, overdue tasks, status, process transparency, etc. • Provide Real-time monitoring if feasible Real-time capability can help user get the information immediately without waiting. Google Real-Time Analytics is a good example Example: Google Analytics (Real-Time )
  • Design > Solution Architecture DesignProvide the flexibility – example1 Predefined feature might not meet every user‘s needs. Therefore, try to allow uses to extend the features by their own 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.
  • Design > Solution Architecture DesignProvide the flexibility – example2 For example, Tagging lets users to organize and categorize their collections of items in the way they find useful. 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.
  • Design > Solution Architecture DesignLeverage 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…
  • Design > Solution Architecture DesignLeverage the intelligence – example1 example: MicroStrategy Support Center Dashboard User can get insights and visibility from the power of business intelligence.
  • Design > Solution Architecture DesignLeverage the intelligence – example2 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.
  • Design > Solution Architecture DesignLeverage the intelligence – example3 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.
  • Design > Solution Architecture DesignLeverage the intelligence – example4 Recommendation from system Amazon‘s recommendation is an excellent example of intelligence. By analyzing other user‘s buying behavior, the intelligence simplifies user‘s life.
  • Design > Solution Architecture DesignLeverage the intelligence – example5 User reviews. User‘s Review 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.
  • Design > Solution Architecture DesignLeverage the intelligence – example6 Expert‘s Review example: iTunes Expert‘s recommendations or Editors 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.
  • Design > Solution Architecture DesignSimplify 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
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial Tips for avoiding feature creep Design Solution Architecture Design  User Experience Design Technical Design
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial Tips for avoiding feature creep Design Solution Architecture Design  Know your users User Experience Design Technical Design   Basic UI Design Framework  Design Principles and Tips
  • Design > UX Design > Know your usersPuts users’ needs at the center of design We are not the users ! Product managers, designers and developers are not the real users
  • Design > UX Design > Know your usersUser’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 > UX Design > Know your usersDesign 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
  • Design > UX Design > Know your usersUsers 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 conflict with the efficiency. How to balance them is a constant challenge to designers.
  • Design > UX Design > Know your usersIntermediates are the mainstream Most users are neither beginners nor experts; instead, they 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
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial Tips for avoiding feature creep Design Solution Architecture Design  Know your users User Experience Design Technical Design   Basic UI Design Framework  Design Principles and Tips
  • Design > UX Design > Basic UI Design FrameworkThe elements of user experience Source: The Elements of User Experience – Jesse James Garrett
  • Design > UX Design > Basic UI Design FrameworkPOP UI design model Simplicity is dependent on how you organize functions, information into meaningful chunks/units. UI DESIGN Present POP UI Design Model ( Prioritize, Organize, Present )
  • Design > UX Design > Basic UI Design FrameworkPrioritizing information ―If everything is important, Nothing is. 1 ” Don‘t treat everything equally. Instead, differentiate them UI DESIGN 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 Present 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 Source: unknown
  • Design > UX Design > Basic UI Design FrameworkOrganizing information UI DESIGN You can organize and structure information through  Separating Present Separating the system/module/screens by time, space, dimension, logic, etc. it can hide complexity.  Grouping Putting related things together logically, visually, or by sequence, etc.
  • Design > UX Design > Basic UI Design FrameworkOrganizing information ― Divide each difficulty into as many parts as is feasible and necessary to resolve it. ‖ Rene Descartes ― Most human beings can only concentrate on one thing at a time. ‖ Jef Raskin Note: Separation can make complex things look simple. However, it could result in more clicks and usually less efficiency, even discoverability issues.
  • Design > UX Design > Basic UI Design FrameworkOrganizing 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.
  • Design > UX Design > Basic UI Design FrameworkOrganizing information – example 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.
  • Design > UX Design > Basic UI Design FrameworkOrganizing information – example 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.
  • Design > UX Design > Basic UI Design FrameworkOrganizing information – example 6013821000625562891 6013 8210 0062 5562 891
  • Design > UX Design > Basic UI Design FrameworkOrganizing information – example • 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. Example: Microsoft PowerPoint Options Source: UI Pattern http://www.patternry.com/
  • Design > UX Design > Basic UI Design FrameworkOrganizing information – example example: SAP Business ByDesign
  • Design > UX Design > Basic UI Design FrameworkPresenting information Choose the right element/pattern to present information to users depending on the usage scenarios. For example: • Icon UI DESIGN • Text & Typography • Sound • Thumbnails • Picture / Diagram Present • Table • Chart • Form • Dashboard • Menu • Toolbar • Pagination • Carousel • etc…
  • Design > UX Design > Basic UI Design FrameworkPresenting information – example Source: Six And Half Philosophies for Design & Innovation, Alex Zhu Which one is better ?
  • Design > UX Design > Basic UI Design FrameworkPresenting information – example Table 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
  • Design > UX Design > Basic UI Design FrameworkPresenting information – example 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.
  • Design > UX Design > Basic UI Design FrameworkPresenting information – example 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. Bad example: SAP Customer Service System
  • Design > UX Design > Basic UI Design FrameworkPresenting information – example 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/
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial Tips for avoiding feature creep Design Solution Architecture Design  Know your users User Experience Design Technical Design   Basic UI Design Framework  Design Principles and Tips
  • Design > UX Design > Design Principles and TipsThink 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 !!!
  • Design > UX Design > Design Principles and TipsCase Study: Innovation makes the difference thumbnails example Google Chrome 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
  • Design > UX Design > Design Principles and TipsSimplify UI from every dimensions Every aspects are important Learnability Efficiency Memorability Errors Satisfaction Usability components, Nielsen(1993)
  • Design > UX Design > Design Principles and TipsSimplify UI from every dimensions :: Learnablity Learnability Efficiency Memorability Errors Satisfaction Usability components, Nielsen(1993)
  • Design > UX Design > Design Principles and TipsLearnability 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… See details in the next slides 1 Source: Designing with the Mind in Mind, Jeff Johnson
  • Design > UX Design > Design Principles and TipsCreate 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
  • Design > UX Design > Design Principles and TipsCreate a clear visual hierarchy • Visual hierarchy lets people focus on the relevant information Create a Clear Visual Hierarchy Create a Clear Visual Hierarchy Organize and prioritize the contents Organize and prioritize the contents of a page by using of a page by using size, prominence, size, prominence, and content relationships. and content relationships. Let’s look at these relationships more closely. Let’s look at these relationships more closely. The more important a headline is, the larger its font size should be. • Size. The more important a headline is, the larger its font size Big bold headlines help to grab the should be. Big bold headlines help to grab the user’s attention as user’s attention as they scan the they scan the Web page. Web page. The more important the headline or content, the higher up • Prominence. The more important the headline or content, the the page it should be placed. The higher up the page it should be placed. The most important or most important or popular content popular content should always be positioned should always be positioned prominently near the top of the page, so users can view it without prominently near the top of the page, having to scroll too far. so users can view it without having to scroll too far. Group similar content • Content Relationship. Group similar content types by displaying types by displaying the content in a the content in a similar visual style, or in a clearly similar visual style, or in a clearly defined area. defined 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
  • Design > UX Design > Design Principles and TipsClear 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.
  • Design > UX Design > Design Principles and TipsMake 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 Dividing 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 layout Use paragraph , headlines, lists, bullet points ,boxes and bold text to make your page easily scannable. • Provide clear visual clues Visual 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
  • Design > UX Design > Design Principles and TipsMake it quick to scan and find – example example: www.cnn.com example: Microsoft Excel 2007 The titles of screen, area or group indicate the purpose of the respective interface element.
  • Design > UX Design > Design Principles and TipsMake 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.
  • Design > UX Design > Design Principles and TipsTell user where they are eBay > Fashion > Women‘s Clothing Example: Breadcrumb Breadcrumb can help users know his location in the websites hierarchical structure in order to possibly browse back to a higher level in the hierarchy
  • Design > UX Design > Design Principles and TipsLess is more Less is more Focus on the essential, yet reveal additional detail as needed. .
  • Design > UX Design > Design Principles and TipsUse progressive disclosure Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone1 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 dont need. Progessive Disclosure Progessive Dont hide commonly used items, because users might Disclosure not find them. But make sure whatever is hidden has value 2. 1. source: Progressive Disclosure, Jakob Nielsen 2.Source: Top Guidelines Violations, Microsoft
  • Design > UX Design > Design Principles and TipsReduce the amounts of choices Reduce the number of choices presented at any given time1 The Paradox of Choice2 The more choices a person is presented with, the harder it is for them to choose. 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. 1 Source: Office 2007 Design Tenets, Microsoft 2Source: The Paradox of Choice, Barry Schwartz
  • Design > UX Design > Design Principles and TipsReduce clutter One of the great enemies of easy-to-grasp pages is visual noise… Steve Krug • Eliminate unnecessary elements on UI A 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
  • Design > UX Design > Design Principles and TipsOmit needless things Hide unnecessary elements
  • Design > UX Design > Design Principles and TipsHide less used tasks (80/20 rule) – example example: www.linkedin.com 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.
  • Design > UX Design > Design Principles and TipsHide less used tasks (80/20 rule) – example In spite of more clicks, less-used tasks are placed in Example: Yahoo Mail Actions dropdown menu. This make frequently-used task more prominent and also reduce the clutter.
  • Design > UX Design > Design Principles and TipsSave screen space – Hover Control Use Hover controls: UI might look busy if too many options are shown at once. But Example: www.twitter.com 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.
  • Design > UX Design > Design Principles and TipsSave screen space – Hover Control example: Apple iTunes In this example, Play button is only shown when mouse over. The text on the button provides user a clear hint.
  • Design > UX Design > Design Principles and TipsSave 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.
  • Design > UX Design > Design Principles and TipsSave screen space – Accordion Accordion Pattern 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
  • Design > UX Design > Design Principles and TipsSave 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
  • Design > UX Design > Design Principles and TipsSave 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
  • Design > UX Design > Design Principles and TipsSometimes use icons instead of text 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. 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.
  • Design > UX Design > Design Principles and TipsMake 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  ….
  • Design > UX Design > Design Principles and TipsMake important elements prominent – examples 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. Example: www.yammer.com
  • Design > UX Design > Design Principles and TipsAvoid 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. New design Old design
  • Design > UX Design > Design Principles and TipsUse 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.
  • Design > UX Design > Design Principles and TipsVisualize where possible A picture is worth 1000 words
  • Design > UX Design > Design Principles and TipsVisualize 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.
  • Design > UX Design > Design Principles and TipsVisualize where possible – example Which one is better ? Microsoft Windows 3.x File Manager Microsoft Windows 7 (The used space/ free space of disks is visualized)
  • Design > UX Design > Design Principles and TipsVisualize where possible – example Metaphors can make an application self-explanatory because they allow users to transfer existing knowledge to the application. This simplifies learning, 1 relearning, and using an application. Delete Print Calendar 1 Source: Simplifying for Usability, SAP
  • Design > UX Design > Design Principles and TipsVisualize where possible – example In PowerPoint the available choices are shown by the pictures instead of text. It makes UI more In this dropdown list from PowerPoint, the intuitive and more direct. Users don‘t need to available choice of fonts are visualized. This imagine or guess the meaning of the text. makes UI very intuitive.
  • Design > UX Design > Design Principles and TipsVisualize where possible – example thumbnails Thumbnails can provide the graphical overview of objects like pictures, movies, reports, etc.
  • Design > UX Design > Design Principles and TipsVisualize where possible – example example: Zoho Invoice 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.
  • Design > UX Design > Design Principles and TipsProvide 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…
  • Design > UX Design > Design Principles and TipsGuide users – standard help Knowing how to perform tasks reduces its inherent complexity. • Standard Help is not suitable for the beginner Standard online help is a poor tool for providing such beginner assistance. …its primary utility is as a reference, and beginners don‘t need reference information; they need overview information, such as a 1 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 be fixed into the interface. It must know how to go away when its services are no 2 longer required. • Don‘t use help as the means to offset poor design. If user has to resort to help document, rethink your design. ― Knowledge make everything simpler ‖ 1. source: About the face 3, Alan Cooper 2. source: About the face 3, Alan Cooper
  • Design > UX Design > Design Principles and TipsGuide users – Demo ― Very few people take the time to read instructions 1.‖ 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. example: SlideRocket 1 Source: Don’t make me think, Steve Krug
  • Design > UX Design > Design Principles and TipsGuide 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 Johnson 2. Source : How to Design a Great User Experience, Microsoft
  • Design > UX Design > Design Principles and TipsGuide users – hint or instruction 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.
  • Design > UX Design > Design Principles and TipsGuide users – hint or instruction example: Visual Studio 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.
  • Design > UX Design > Design Principles and TipsGuide users – hint or instruction example: BaseCamp 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.
  • Design > UX Design > Design Principles and TipsGuide users – hint or instruction 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.
  • Design > UX Design > Design Principles and TipsGuide users – hint or instruction Before After 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.
  • Design > UX Design > Design Principles and TipsGuide users – hint or instruction 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.
  • Design > UX Design > Design Principles and TipsGuide users – hint or instruction Example: Input Prompt 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
  • Design > UX Design > Design Principles and TipsGuide users – Sample Content Sample content can help the novice users learn the system. example: Zoho Invoice
  • Design > UX Design > Design Principles and TipsGuide users – Thoughtful Defaults 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 example: Print dialog in PowerPoint the default value. Don‘t assume user will configure the value to meet their needs. Keep it in mind: most of users are lazy.
  • Design > UX Design > Design Principles and Tips Guide users – Pre-defined default. example: Microsoft PowerPoint 2007 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
  • Design > UX Design > Design Principles and TipsGuide 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.
  • Design > UX Design > Design Principles and TipsUse Transitions as design elements • Transition can make visual connections between visual states • Transition could bring about the rich and nice experience 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
  • Design > UX Design > Design Principles and TipsUse 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 In this example user has to control the objects on the screen indirectly the UI elements through pressing the physical keys 1. Source : Designing with Windows Presentation Foundation, Microsoft
  • Design > UX Design > Design Principles and TipsMake 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.
  • Design > UX Design > Design Principles and TipsProvide 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.
  • Design > UX Design > Design Principles and TipsBe 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.
  • Design > UX Design > Design Principles and TipsUse 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.
  • Design > UX Design > Design Principles and TipsSimplify UI from every dimensions :: Efficiency Learnability Efficiency Memorability Errors Satisfaction Usability components, Nielsen(1993)
  • Design > UX Design > Design Principles and TipsAbout 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 users 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.
  • Design > UX Design > Design Principles and TipsHelp 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
  • Design > UX Design > Design Principles and TipsLeverage 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
  • Design > UX Design > Design Principles and TipsApply Fitts law Use large objects for important functions (Big buttons are faster)1. 1. source: First Principles of Interaction Design, Bruce Tognazzini The larger we can make the clickable area of the objects, the easier they will be to click on.
  • Design > UX Design > Design Principles and TipsEnable 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]
  • Design > UX Design > Design Principles and TipsDirectly 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 Docs Add document as Favorite 1 Source: Carousel, UI Patterns
  • Design > UX Design > Design Principles and TipsDirect manipulation- Drag and Drop example: iGoogle Rich visual feedback is the key to successful direct manipulation. [ Alan Cooper,etc ]
  • Design > UX Design > Design Principles and TipsCommand line UI example: Windows 7 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.
  • Design > UX Design > Design Principles and TipsBatch 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.
  • Design > UX Design > Design Principles and TipsAuto 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
  • Design > UX Design > Design Principles and TipsAuto-suggestion example: Hotmail 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
  • Design > UX Design > Design Principles and TipsAuto-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.
  • Design > UX Design > Design Principles and TipsScript, Rule, Macro, Formula In Outlook user can define a rule. Once the condition is met, system will automatically perform the task. example: Define Rule in Microsoft Outlook The approaches like Rule, Formula, Script, Macro are very powerful means.
  • Design > UX Design > Design Principles and TipsQuick navigation – Shortcut Use shortcuts like My Favorites, quick links, desktop shortcut, Recent Documents, etc example: Explorer in Windows 7 example: Launch Page of Adobe Flash
  • Design > UX Design > Design Principles and TipsQuick navigation – Tag Cloud Tag Cloud can not only help user quickly perceiving the importance of each subjects , but also be used as navigation aids
  • Design > UX Design > Design Principles and TipsQuick preview When using the scrollbar, a thumbnail of the page will appear along the scrollbar. This quick preview example: Adobe Acrobat Reader features help user quickly navigate the target pages.
  • Design > UX Design > Design Principles and TipsQuick preview In Youku user can preview the movieclip by mouse over the timeline
  • Design > UX Design > Design Principles and TipsReal 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.
  • Design > UX Design > Design Principles and TipsReal time quick view Example: Amazon.com 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.
  • Design > UX Design > Design Principles and TipsStay 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.
  • Design > UX Design > Design Principles and TipsStay 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. 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 1 Source: http://www.patternry.com/p=overlay/
  • Design > UX Design > Design Principles and TipsStay on the page – Overlay example Example: facebook example: FaceBook Clicking on the thumbnail will display the full-blown picture in the overlay rather than in another separate page.
  • Design > UX Design > Design Principles and TipsProvide 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.
  • Design > UX Design > Design Principles and TipsProvide 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
  • Design > UX Design > Design Principles and TipsProvide different perspectives – example 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.
  • Design > UX Design > Design Principles and TipsProvide different perspectives – example example: apple iTune Provide user the different views which can meet different needs. In this example, user can switch the view for the same content.
  • Design > UX Design > Design Principles and TipsOverview & Dashboard Consolidate key information from different sources into ONE page example: mint.com
  • Design > UX Design > Design Principles and TipsSearch 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.
  • Design > UX Design > Design Principles and TipsShift the complexity to the system example: Visual Studio 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 !
  • Design > UX Design > Design Principles and TipsSimplify UI from every dimensions :: Memorability Learnability Efficiency Memorability Errors Satisfaction Usability components, Nielsen(1993)
  • Design > UX Design > Design Principles and TipsEase memory burden • Magical 7 ± 2 : Our Capacity for processing information is limited • People cant keep much information in their short-term memory1 • Memory recall deteriorates with time • Recognition is easier than remembering (recall)2. 3 “ Recognition rather than recall ” 1 Source: Short-Term Memory and Web Usability, Jakob Nielsen 2. Source:Simplifying for Usability, SAP 3 Source: Ten Usability Heuristics, Jakob Nielsen
  • Design > UX Design > Design Principles and TipsHow 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…
  • Design > UX Design > Design Principles and TipsLeverage picture’s power • Pictures plus text are remembered best 1. • Pictures are remembered better than text alone2. • Picture are extremely well recognized3 Which one is better ? 1.2.3. Source: Simplifying for Usability, SAP
  • Design > UX Design > Design Principles and TipsAuto completion – example Before After – example 1 After – example 2
  • Design > UX Design > Design Principles and TipsAuto suggestion – example Not only for sake of efficiency, Auto Suggestion is also sort of recommendation and can ease memory load.
  • Design > UX Design > Design Principles and TipsRecent history – example • Remember last state • Record recent actions / History Recent list/history is automatically recorded in PowerPoint. Users can quickly find the recent documents.
  • Design > UX Design > Design Principles and TipsRecent 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.
  • Design > UX Design > Design Principles and TipsReminder – 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.
  • Design > UX Design > Design Principles and TipsReminder – 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.
  • Design > UX Design > Design Principles and TipsSimplify UI from every dimensions :: Errors Learnability Efficiency Memorability Errors Satisfaction Usability components, Nielsen(1993)
  • Design > UX Design > Design Principles and TipsThe tolerance principle The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions1. 1source: Software for use, Larry Constantine and Lucy Lockwood
  • Design > UX Design > Design Principles and TipsBefore error happen Address error at different stages: × Before Error happens 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
  • Design > UX Design > Design Principles and TipsProvide Warning Preventing error is much better than just recovering from it Alarm to warn against dangerous actions
  • Design > UX Design > Design Principles and TipsProvide 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.
  • Design > UX Design > Design Principles and TipsUse constraint to prevent the error USB cord will fit into only a particular slot on this laptop. example: MS PowerPoint 2007 In order to avoid the error, some action buttons shall be disabled once they are not available.
  • Design > UX Design > Design Principles and TipsAfter error happened Address error at different stages: × Before Error happens After After error happened:  Provide constructive feedback.  Make actions reversible when possible  UI shall be tolerant
  • Design > UX Design > Design Principles and TipsProvide 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
  • Design > UX Design > Design Principles and TipsMake 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.
  • Design > UX Design > Design Principles and TipsMake 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.
  • Design > UX Design > Design Principles and TipsUI shall be forgiving User might make mistake. UI shall be error-tolerant. 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.
  • Design > UX Design > Design Principles and TipsSimplify UI from every dimensions :: Satisfaction Learnability Efficiency Memorability Errors Satisfaction Usability components, Nielsen(1993)
  • Design > UX Design > Design Principles and TipsDon’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
  • Design > UX Design > Design Principles and TipsBalance Joy of use and Ease of use :: Good design means that beauty and usability are in balance1 :: Looks complicated Looks simple and elegant Case study: aesthetic and minimalist design 1 Source: Emotion & Design: Attractive things work better ,Don Norman
  • Design > UX Design > Design Principles and TipsAdapt UI to suit each individual users needs Reading Pane at the right side Reading Pane at the Bottom example: Outlook 2007 User can change some settings. For example, users can change the location of the Reading Pane and resize the reading pane.
  • Design > UX Design > Design Principles and TipsDon’t make user wait Performance is a very critical factor ! Savings in time feel like simplicity1 Source: The Laws of Simplicity, John Maeda
  • Part2 - Table of content • Part 2:: Deep Dive- How to address the challenge? Requirement Requirements are crucial Tips for avoiding feature creep Design Solution Architecture Design User Experience Design  Technical Design
  • Design > Technical DesignHide 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.
  • Design > Technical DesignPerformance, 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.
  • Design > Technical DesignRefactoring 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 >> Jim Liang Terry Wang Senior UX Designer, SAP UX Designer, Amazon http://cn.linkedin.com/in/jimliang 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 couldnt otherwise do and achieve their goals effectively.  Efficient The application enables users to perform tasks with a level of productivity and scale that wasnt 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 Dont 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