Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Ux introduction training
Similar to Ux introduction training (20)
Recently uploaded
Recently uploaded (20)
Ux introduction training
- 1. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. User Experience Engagements, Research, Design… Oh My! Tim Huff April, 2015
- 2. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. THE CUSTOMER-DRIVEN ENTERPRISE: CHANGING ENTERPRISE SOFTWARE, ONE USER AT A TIME
- 3. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. Is this what you think of when you think of UX’ers?
- 4. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. UX – The amalgamation of Right and Left Right Brain Creative “Big Picture” Oriented (Looks at wholes) Random Intuitive Holistic Philosophy & Spiritualism Can “Get It” (the whole meaning) Synthesizing Subjective Empathetic Imagination Imagination Symbols & Imagery Present & Future Believes Appreciates Knows Object Function Fantasy Based Presents Possibilities Spatial Perception Impetuous/Spontaneous Adventurous Carefree/Risk Taking Left Brain Academic Detail Oriented (Looks at parts) Logical Sequential Rational Math & Science Can Comprehend Analytical Objective Uses Logic Facts Rules Works & Language Present & Past Knowing Acknowledges Knows object name Reality Based Forms Strategies Order/Pattern perception Practical/Planned Safe Cautious Illustration by: Tim Huff; Cognitive Descriptions by: Dr. C. Daniels 2008
- 5. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. UX – Where is my Unicorn?
- 6. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.6 Why a Session on UX Design Awareness • A good user experience can’t be tacked on at the end - it has to be built in from the time you approach the problem • You can’t sell a product based on a poor custom demo, bad examples stick in people’s minds • Traditional usability is not enough for a good user experience • You can’t get a design degree over email • Understanding how designers think about a problem will allow more productive collaboration
- 7. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.7 Do not accept a bad experience or process Why do users have to go home to have a good experience? • What is your action? • What is this app? • Let’s look at another • EEM
- 8. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.8 Agenda YouX • Introduction • Introduction into User Experience • Introduction into Usability • Introduction into User Centered Design • Our Approach • Good Design
- 9. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.9 Who am I? Tim Huff – Sr. UX Designer / Architect Design-inspired hands on creative leader that creates and turns ideas into actions; career expertise spanning hardware design, product design, enterprise software development, rich experiences across screens and devices and user- experience design with creative design-thinking. A creative thinker with a cultural IQ. • Education • MBA International Business – SMU Cox • Masters of Design Engineering – University of Texas • Experience • Adobe – 13 years – Sr. Product Designer Creative, Sr. DirectorGlobal UX, Enterprise Consulting • Dassault – 2 years – Global Product Design Manager • Autodesk – 8 years - Design Director 3D products • Own/named on 9 software patents
- 10. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.10 The Moment of Truth
- 11. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. Introduction into UX “What everyone in a company does can be reduced to one of two functions: to serve the customer or serve someone who does...” - W. Edwards Deming
- 12. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.12 The Definition of User Experience (UX) “User Experience” “a person’s perceptions and responses that result from the use or anticipated use of a product, system, or service.” That includes “all the users’ emotions, beliefs, preferences, physical and psychological responses, behaviors, and accomplishments that occur before, during and after use.” (ISO 9241-210) Usability Visual Design Context U X
- 13. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.13 The 5 E’s of UX Effective Efficient Engaging Error Tolerant Easy to Learn "The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use"
- 14. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.14 Busines sVision. Goals. Requirements. Pragmatic. Analytics. Demographic. Budget. Stakeholders. Determines. UX and Organizational Synergy Design Aesthetics. Creativity. Subjective. Abstraction. , Experimental. . Visual. Front End. . Explains. Clarifies. . Technology Functionality. Engineering. Foundation. Objective. Backend. Performance. Feasibility. Realistic. Complex. Establishes. Effectiveness. Interaction. Usability. Elegance. UCD. Simplicity. Product Driven. Efficiency. Relevance. Logic. Concrete. Goal Driven. Brand Equity. Company Image. Style. Marketing. Advertising. Consistency. Trust. Communication. Message Driven. UXUser Advocacy. Research. Stories. Validity. Reliability. User Driven.
- 15. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.15 The Definition of Usability “Usability” is a quality attribute of User Experience that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.
- 16. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.16 Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism UX is not UI Field research Face to face interviewing Creation of user tests Gathering and organizing statistics Creating personas Product design Feature writing Requirement writing Graphic arts Interaction design Information architecture Usability Prototyping Interface layout Interface design Visual design Terminology creation Copywriting Presenting and speaking Working tightly with programmers Brainstorm coordination Design culture evangelism WHAT UX ISWHAT PEOPLE THINK UX IS “UX is the intangible design of a strategy that brings us to a solution.”
- 17. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.17 UX is not UI UX = USER EXPERIENCE UI = USER INTERFACE USER EXPERIENCE = USER INTERFACE A User Interface is: • A Tool • A point of Interaction • A means of communication between Human and System
- 18. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.18 UX is not UI User Experience is: • Is the Interaction itself • Includes Interfaces • Address all aspects of a thing as perceived by a human What people are looking for. The tool that serves it up. Consumption CONTENT USER INTERFACE USER EXPERIENCE UX = USER EXPERIENCE UI = USER INTERFACE USER EXPERIENCE = USER INTERFACE
- 19. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.19 Why Do Intuitive User Experiences Matter? Good UX = $$ • Online customer acquisitions cost an average of $51, while phone acquisitions cost $177 and in-store acquisitions cost $182 1 • 73% of enterprises claim that online-acquired customers have a lower cost to serve 1 • Cost of the average Web self-service session is $1, compared to $10 for an email response and $33 for a telephone call 1 • Customers still open 94% of new accounts in person or over the phone 2 • 90% of online users have problems completing internet business transactions 3 – 82% are unwilling to accept lower levels of customer service online – 40% of the problems online users had involved error messages 1. Le Clair, Craig. In Good Times and Bad, Document-Centric Web Transactions Lower Costs and Improve Experience. Forrester. December 2013 2. Tower Group Massey, Karen. Results from the 2008 U.S. Consumer Channel Preference Survey: Branch is King. 3. IDC: Financial Insights, October 2012
- 20. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.20 Beyond UI
- 21. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.21 Beyond UI
- 22. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.22 In Search of The Great Killer App What Exactly is a “Killer App”? • An application that intentionally or unintentionally gets you to make the decision to buy into the system the application runs on • Application that will motivate potential customers to invest, and to change their behavior. Tim’s definition • One that “Makes it easier to do the things you already do." • Which means the design of these solutions needs to become less technology-centered, and more user experience centered • Efficient execution of tasks and goals • Reduce development time • Reduction of errors • Increase appeal and likeability
- 23. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.23 Design for Outcomes
- 24. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. Know your user Know thy user, and you are not thy user. - Arnie Lund It’s really hard to design products by focus groups. A lot of times, people don’t know what they want until you show it to them. - Steve Jobs
- 25. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.25 Enterprise Software is … Our users say… • Just make it work! • Give me what I need when and where I need it! • Make it Quick! Process centric… • Process Focused • Innovation was focused on transaction scalability and systems performance • Dictated how the user did business
- 26. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.26 One Consistent User Experience
- 27. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.27 A Great Experience Innovates on Both Sides of the Glass In front of the Glass: Rich, human-centric applications that are useful, usable and desirable Behind the Glass: Improve the user-experience by improving how people engage in processes
- 28. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. User Centered Design You’ve got to start with the customer experience and work backwards to the technology. - Steve Jobs
- 29. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.29 UX Process “Concept, Discover, Define, Deliver”: A well-prescribed, user-centric and ROI focused approach to creating Internal IT solutions.
- 30. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. User Centered Design You can use an eraser on the drafting table or a sledge hammer on the construction site. - Frank Lloyd Wright
- 31. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.31 Power of 10’s $1 : $10 : $100 Clare-Marie Karat - IBM Product Development Cycle
- 32. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. User Centered Design Research can tell me what my users need, and sometimes what they want. But it can not tell me what they dream! - Tim Huff
- 33. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.33 Aligning research methodology to design phase Know your Customer Discovery Formulation Evaluation Ethnography Contextual InquirySurvey Formative Usability Evaluative Usability Design solution does not exist Key concepts not well-defined Design solution does exist Key variables can be measured Initiation Design Concept Launch
- 34. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.34 Customer Data Know your Customer • Actionable Insight = connecting the wires between research data and design • Big Data is a must in UX
- 35. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.35 Align UCD with front end planning Experience Modelling • Apply design and UCD principles into the project planning process • Educate on the value and ROI of contextual modeling
- 36. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.36 Personas Behavioural Segmentation Personas help to focus decisions surrounding site components by adding a layer of real-world consideration to the conversation. They also offer a quick and inexpensive way to test and prioritize those features throughout the development process. In addition they can: • Enable stakeholders and leaders to evaluate new features. • Help information architects develop informed wireframes, interface behaviors, and labeling. • Aid designers in creating the overall look and feel of the website or application. • Guide system engineers/developers in deciding which approaches to take based on user behaviors. • Ensure copy writers create their content for the appropriate audiences.
- 37. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.37 • Solving for overload is about putting information in the right place • The expansion of big data into our core studies Information Overload Behavioural Segmentation
- 38. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.38 Approaches for generating UX Strategy Road Map Road Map • Gather relevant data • Create the universe of possibilities • Assign a value (typically Business value, Customer value, Technology effort or cost) • Apply weighting as warranted by the context • Apply a reality check • Stage the resulting prioritized list into releases • Create a strategy road map • Determine acceptance criteria • Establish communication channels • Document assumptions and constraints (Risk Management) • Define Qualitative and Quantitative KPI’s • Define Governance
- 39. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.39 Modern UX platform for building good UX solutions 39
- 40. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. Usability Design
- 41. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.41 Design Thinking – Putting design in our DNA Complements of IDEO
- 42. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.42 Design Thinking – Mindsets Focus on Human Values Empathy for the people you are designing for and feedback from these users is fundamental to good design. Show Don’t Tell Communicate your vision in an impactful and meaningful way by creating experiences, using illustrative visuals, and telling good stories. Craft Clarity Produce a coherent vision out of messy problems. Frame it in a way to inspire others and to fuel ideation. Embrace Experimentation Prototyping is not simply a way to validate your idea; it is an integral part of your innovation process. We build to think and learn. Be Mindful Of Process Know where you are in the design process, what methods to use in that stage, and what your goals are. Bias Toward Action Design thinking is a misnomer; it is more about doing that thinking. Bias toward doing and making over thinking and meeting. Radical Collaboration Bring together innovators with varied backgrounds and viewpoints. Enable breakthrough insights and solutions to emerge from the diversity.
- 43. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.43 Design Thinking = User-Centered Design (UCD) UCD is a design philosophy/approach where the end-user’s needs, wants and limitations are a focus at all stages within the design process and development lifecycle. Products developed using the UCD methodology: Are optimized for end-users Emphasis is placed on how they need or want to use a product Allows us to “Design for Outcomes”
- 44. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.44 Focusing on the User Not only the WHAT: • The business problem(s) • Business requirements • Scope of the work IMPORTANT TO UNDERSTAND But the HOW (Helping Others Win): • How will I save users time and make it easier for them? • How do I increase efficiency by leveraging technology? • How can I help the user efficiently meet their goals and needs? This is your opportunity for innovation. GOOD UX CAN CHANGE THE OVERALL PROCESS OF HOW THINGS
- 45. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.45 Commit to the Top 10 UX Design Best Practices Great design is possible by ensuring that you have the following ingredients: 1. Comprehensive research on users, needs and behaviors to define high-priority usage scenarios. 2. Human-factor principles are deeply understood and appropriately applied. 3. Cohesive usage scenarios tied to organizational business value, not just user requirements. 4. Innovative rethinking of familiar concepts and approaches to redefine the product category. 5. Well-chosen design vocabulary to create solutions and rapidly iterate toward an optimal solution. 6. Validation of creative ideas via systematic usability testing and other mechanisms driven by objective data from users. 7. Limit "feature bloat" by ruthless pruning to sustain a core concept. 8. Overcome development difficulty because, although good design is invisible, achieving invisible ease-of-use can require a sophisticated technology foundation. 9. High performance, including speed, is a key factor affecting usability and high-performance results more from a broad architecture than from narrow-scope optimization. 10. Test, test, test — repeatedly. This practice increases the odds of delivering a cohesive, compelling solution that satisfies users, while maximizing the business value.
- 46. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.46 Connecting with Dev HP Intranet UI Development Kit • Front-end framework for HP designers and developers • Fast, lightweight, flexible and feature-rich • Features user interface elements, interactions, effects, widgets and themes • Built on top of JQuery, CSS 3.0, Jquery UI and html 5 • Complies with the HP standard GFIT Usability Team is working toward integrating production-ready design deliverables with the UDK to increase development efficiency and save HP $$$.
- 47. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.47 Design Language The (Visual) Elements of Design Point Line Plane Form Value Color Texture Direction
- 48. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.48 Design Language The (Temporal) Elements of Design Sequence Motion
- 49. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.49 Design Language The Principles of Design Contrast Balance Movement Rhythm Hierarchy
- 50. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.50 Design Language Contrast Contrast in Value
- 51. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.51 Design Language Contrast Contrast in Value
- 52. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.52 Design Language Contrast Contrast in Shape
- 53. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.53 Design Language Contrast Contrast in Size
- 54. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.54 Design Language Contrast Contrast in Texture
- 55. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.55 Design Language Contrast Contrast in Rhythm
- 56. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.56 Design Language Contrast Contrast in Density
- 57. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.57 Design Language Balance Balance is a psychological sense of equilibrium.
- 58. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.58 Design Language Balance Symmetry
- 59. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.59 Design Language Balance Asymmetry
- 60. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.60 Design Language Movement Eyepaths
- 61. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.61 Design Language Movement Eyepaths - the diagonal placement of elements reinforce the feeling of movement and action.
- 62. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.62 Design Language Hierarchy Emphasis
- 63. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.63 Design Language Hierarchy Size
- 64. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.64 Design Language Hierarchy Color
- 65. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. 11 Usability Rules for IT Design
- 66. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.66 11 Rules for IT Design Know Your Users A great application helps users succeed in the easiest and fastest way possible. There are 3 things a developer needs to know about users: • How users speak: The application needs to speak the same language and use the same terms as its users. • What motivates usage: The application needs to keep users motivated and help them achieve their goals. • Common tasks: The application needs to excel in helping users complete repetitive tasks quickly and easily. 1 Using tech lingo is a common mistake made by technical leaders. This can lead to misunderstandings and user errors. “Transaction” and “Wallpaper” are examples of words that have different meanings for techies or for someone working in the stock market…
- 67. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.67 11 Rules for IT Design Write for Clarity Text is a big part of your user interface, and you need to lay it out for usability. The words you use must clearly communicate what the user is looking at, and what will happen when there’s interaction. This applies to all written elements, including section and page titles, labels, links, buttons, and feedback messages. Well crafted text eliminates surprises and uncertainty from the application, and is a mandatory step for usability. 2 Submit KNA1 List Record Saved Save Customer Customer List Customer “Acme” Saved successfully KNA1 is the customer master table in SAP Not good Better “Click” “Click”
- 68. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.68 11 Rules for IT Design Design with data Data is the main asset of an enterprise application. Displaying it in the most effective way without needless distractions is a mandatory step to building a great app. Beware that in most situations the best way to show information only surfaces when you experiment with real user data. Designing user experiences with “lorem ipsum” quotes and images of cats will surely lead to poor results. 3 Johnny B. Goode johnny.b@mailinator.com 555-332-221 123 Main, Texas 75024 Name: Email: Phone: Address: Customer1 sampleEmail 12345678 Somewhere By using real user data, it becomes obvious that the labels are clutter
- 69. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.69 11 Rules for IT Design Group Related Info Grouping related data makes it easier for users to find what they need. Grouping is particularly effective when used with emphasis. Conversely, unrelated items should be separated. The best way to make things stand apart is to put empty space between them. Avoid using lines or boxes for grouping. 4 Johnny B. Goode Sarah Wilco johnny.b@mailinator.com sarah.w@mailinator.com Johnny B. Goode johnny.b@mailinator.com Sarah Wilco sarah.w@mailinator.com
- 70. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.70 11 Rules for IT Design Emphasize What Matters Everything you place on screen demands your user’s attention, so decide what the user must see first. This is particularly important because users don’t read pages, they scan through them. Be sure to direct them to the things that matter. To call user’s attention you can use things like position, size, color, images, links, or buttons. 5 Johnny B. Goode johnny.b@mailinator.com 555-332-221 5901 Peachtree Dunwoody, GA 30328 Johnny B. Goode johnny.b@mailinator.com 555-332-221 5901 Peachtree Dunwoody, GA 30328 Emphasizing makes it easier to find what matters. Note that what’s relevant depends on the user: for a mechanic, the license plate is the key information for a car. But for the insurance agent, it’s the vin number.
- 71. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.71 11 Rules for IT Design Remove Clutter Every element on a screen is competing for a user’s attention, regardless of being content or decorative. If something doesn’t add value to what is on the screen it should be removed. Likewise, you could put all information on the page inside boxes, but are those lines really necessary? The trick is to be sure everything on the screen is there for a reason, and there’s nothing else you can remove. 6 Date Amount Accumulated 2012-02-24 $12,000 2012-02-23 $10,000 $246,000 $234,000 Id Date Amount Accumulated Created On 1323 2012-02-24 $12,000 $246,000 2012-02-24 2122 2012-02-23 $10,000 $234,000 2012-02-24
- 72. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.72 11 Rules for IT Design Align for Readability It’s very hard to scan and read information on applications with poorly aligned content. It doesn’t matter if it’s a set of fields, a chart, a block of text; information must be positioned with a purpose. Together with grouping and emphasis, alignment plays a key role in making information easier to scan and read. 7 Transaction Details Date: 2013-02-23 Amount: $10,000 Notes: Payment related to 34 units sold in January Transaction Details Date: 2013-02-23 Amount: $10,000 Notes: Payment related to 34 units sold in January Not so good... Better
- 73. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.73 11 Rules for IT Design Minimize User Inputs Typing information into an enterprise application is painful, so ask for as little input as possible. Whenever possible, guess instead of asking. If users need to input information, make it completely obvious about what is needed, be tolerant on the input formats you accept, and be helpful when something goes wrong. 8 Set user expectations about what is needed. ( )- - Invalid input (411)-231-112 411 is a reserved area code (411)-231-112 Be helpful - explain what went wrong. Be tolerant. Accept how users choose to input data. 555326713 555326713 Invalid input Phone: Phone: Phone: Phone: Phone: Phone: Not so good... Better
- 74. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.74 11 Rules for IT Design Build Effective Navigation In a great application, users know where they are, how to get where they want to be, and what’s available to them. To build great navigation, you need to write the menu entries in user language, emphasize what’s important, be clear about the destination of the menu entries, and use navigation consistently throughout the application. Don’t forget to highlight where your user is, since every page on a web application is a potential entry page. 9 myCRM » Reports » Marketing » Lead StatusAccounts OpportunitiesContacts Use the user’s language for navigation, and highlight where the user currently is. If your application has many hierarchical levels, breadcrumbs are a good way to show where your user is. Breadcrumbs are a complement to menus, and are not to be used by themselves.
- 75. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.75 11 Rules for IT Design Be Consistent Great applications provide a consistent and predictable user experience. By using the same visual clues, positions, or lexicon it becomes obvious to a user what will happen next. It also makes it easier for users to find what they are looking for. For instance, it doesn’t matter much if the “Cancel” operation is a link or a button, only make its representation consistent. Being consistent with outside conventions – whether from other applications or the users’ context – is also a must. Vocabulary is a good example of a place where you should invest a lot of consistency. 10 All these buttons belong to the same application. Note the inconsistency on the shape, color, icons, and text!
- 76. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.76 11 Rules for IT Design Test, Test, Test You can follow all the rules in the UX book, but you’ll still be surprised at how fast your application will fail in the hands of your users. The only way to ensure success is to user test your application. The top 3 rules for successful testing are: • Make testing as simple and cheap as possible, or else the tests will never get done. • Test as soon as possible. Remember you’ll need time to fix the problems and re-test. • Make the team watch the tests, it’s the best, fastest way to get buy-in on the top issues to fix. 11
- 77. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. UX Team
- 78. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.78 Guidelines and Helpful Resources • HP Experience • HP Internal Web Style Guidelines • HP Anywhere UX Design Guidelines • The HP Grid • HP Axure Library & Master Components • HP Usability Website (very soon) • The Usability Team Drew Tim Dana Ron
- 79. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.79 Call to Action Put User Centered Design into the HP DNA • Put the user in the middle every step in the process • Create a unified vision of User Experience at HP – Collaborate with the other design teams at HP Resources • HP IT UX Repository – https://ent301.sharepoint.hp.com/teams/PanHPITUXRepository/_layouts/15/start.aspx#/ • UX Books – Steve Krug – Rocket Surgery Made Easy – Jeff Gothelf – Lean UX – Steve Krug – Don’t make me think – Chris Nodder – Evil by Design – Leah Buley – The User Experience Team of One
- 80. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.80 Take the Leap Just because nobody complains doesn’t mean all parachutes are perfect! - Benny Hill
- 81. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. QA On a corporate intranet, poor usability means poor employee productivity; investments in making an intranet easier to use can pay off by a factor of 10 or more, especially at large companies. CIO Business Web Magazine, 1999
- 82. © Copyright 2013 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice. Thank you
Editor's Notes
- I want to tell you a story about enterprise software that is different from what you have heard anywhere before. Enterprise systems were designed for transaction scalability and reliability and to solve really tough problems – automating supply chains, managing financials or content. Here is a shock – “These systems were not designed for users”. Today I want you to start to think differently, I want you to think about reaching through the screen and grabbing your customer and sharing an interaction with you. I want you to think about targeting people outside of our firewall, where we have no control over what system or device they are using or when and where they want to interact with us. This is a place where we can’t dictate standards to your users. They have a choice. They drive the interaction This place is the Customer Driven Enterprise, and it is scary! But we can easily remove the fright factor and create a happy place and it starts with designing new systems, leverages our past investments, engaging and delighting customers and capturing the promise of the web – sound exciting?
- Why is it so hard to find strong visual designers who have interaction and product design experience? In theory IxD and graphic design should go hand in hand and the market should be flooded. The reality is that a perfect storm of historical design inertia is failing to produce these much-needed hybrids. First, design schools have traditionally not taught interaction design or user experience design skills, fields of study commonly associated with UX (cognitive psychology, information architecture, research methods etc)
- Here are a few reasons you should learn about ux and incorporate it into your process Tacking ux on at the end either leads to tons of rework or a bad experience. Reduce rework by starting from a ux perspective. Make sure you are actually solving the right problem the best way. New tech often creates new problems even as it solves old ones. Make sure to acknowledge and address those problems Customers usually can’t imagine something different than what you show them or what they already have. ‘Imagine if you will….’ doesn’t work Simply reducing the number of clicks does not a good experience make. Usability needs to take into account the cognitive, mental, emotional, and situational aspects, restrictions, and opportunities. Asking a designer how to ‘maximize user experience’ in the UI you are building is unreasonable and meaningless. User experience requires a thorough understanding of the users, their problems and goals, and the tool designed to solve it. Here’s a quote from John Chris Jones, design thinker, “When a design problem can be stated mathematically, it can also be solved automatically inside a computer without human intervention” But! Knowing about design can help you understand if and when you do need to bring in a designer. And when you do have one on your team, understanding a little about what they do can help you collaborate more productively. In the next session, we’ll show an example of this collaborative process.
- Everyone recognize this? Was it a good or bad experience? Some major issues – We’ll return to this a few times.
- The Enterprise IT Industry at large is at a cross roads- faced with what I call “The Moment of Truth” Customer first, user centered design. System out v. User In – means you gather your requirements differently System driven looks at architecture, interoperability and process flow User centric looks to simplify the interaction and how a user can discover and navigate effortlessly to the complete their need – focus on design and experience Users are driving the value creation Users look for real-time, rich experiences, social, device-independent, OS independent (No lock down) Secondly the world is in a “Mobile Mind Shift” speed and service is our new mantra The Mobile mind shift is: A set of behaviors and mindsets in which people go forward with confidence that any desired information or service is available, on any appropriate device, in context, at their moment of need. The expectation that the info you need is available whenever you need it on any appropriate device - without having to make a conscious effort to stop what you’re doing, decide which device to use, turn it on, scroll, click, etc., and eventually find what you’re looking for. You want to know what the traffic’s like? Here’s the map. You want a table for dinner? Reserved. You want to know the weather? Done. The result is a user with extremely high expectations that we must be ready to meet, or risk irrelevance. The key to serving these users will be to shorten the distance between what they want and what they get; to refocus our process efforts to deliver utility at speed; to make our users’ lives better rather than just making your technology better.
- UX means: The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother Thinking about how and why people use a product User feedback through evaluation More than just "ease of use" - The 5 E’s; efficient, effective, engaging, error tolerant & easy to learn Being the customer advocate The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design. It's important to distinguish the total user experience from the user interface (UI), even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios.
- This definition can be expanded, and made more comprehensive, by including five characteristics which must be met for the users of a product: * Effective * Efficient * Engaging * Error Tolerant * Easy to Learn Effective Effectiveness is the completeness and accuracy with which users achieve specified goals. It is determined by looking at whether the user’s goals were met successfully and whether all work is correct. It can sometimes be difficult to separate effectiveness from efficiency, but they are not the same. Efficiency is concerned primarily with how quickly a task can be completed, while effectiveness considers how well the work is done. Not all tasks require efficiency to be the first principle. For example, in interfaces to financial systems (such as banking machines), effective use of the system -- withdrawing the correct amount of money, selecting the right account, making a transfer correctly – are more important than marginal gains in speed. This assumes, of course, that the designer has not created an annoying or over-controlling interface in the name of effectiveness. The quality of the user assistance built into the interface can have a strong impact on effectiveness. The effectiveness of an interface often relies on the presentation of choices in a way that is clearly understandable to the user. The more informative an interface can be, the better users are able to work in it without problems. Good interface terminology will be in the user’s language and appropriate to the task. Another design strategy to increase effectiveness is to offer redundant navigation, especially for ambiguous situations. Although this may create inefficient paths, it allows the user to work effectively by making more than one choice lead to the correct outcome. This can be especially valuable in interfaces which support infrequent users or those often unfamiliar with the content domain. Efficient Efficiency can be described as the speed (with accuracy) in which users can complete the tasks for which they use the product. ISO 9241 defines efficiency as the total resources expended in a task. Efficiency metrics include the number of clicks or keystrokes required or the total ‘time on task’ It is important to be sure to define the task from the user’s point of view, rather than as a single, granular interaction. For example, a knowledge base which doled out small snippets of information might be very efficient if each retrieval was considered one task, but inefficient when the entire task of learning enough to answer a user’s question is considered. Navigation design elements such as keyboard shortcuts, menus, links and other buttons all have an impact on efficiency. When they are well-designed, with clearly expressed actions, less time and effort are needed for the user to make navigation and action choices.. Making the right choices for efficient use of the software depends on an understanding of the users and how they prefer to work. For example, are they likely to use the interface infrequently or to be habitual users who might learn hidden controls and shortcuts? Do they use the keyboard, mouse or other input devices? For example, keyboard shortcuts can be extremely efficient for proficient users who work with the interface intensively. If they are the primary interaction tool, they can slow down users who are unfamiliar with them, or with the software. Similarly, an interface structured around a set of hierarchical choices which may be the best solution for one-time or infrequent users, might be frustratingly slow as the only way of interacting with a frequently-used program. Engaging An interface is engaging if it is pleasant and satisfying to use. The visual design is the most obvious element of this characteristic. The style of the visual presentation, the number, functions and types of graphic images or colors (especially on web sites), and the use of any multimedia elements are all part of a user’s immediate reaction. But more subtle aspects of the interface also affect how engaging it is. The design and readability of the text can change a user’s relationship to the interface as can the way information is chunked for presentation. Equally important is the style of the interaction which might range from a game-like simulation to a simple menu-command system. Like all usability characteristics, these qualities must be appropriate to the tasks, users and context. The style of engagement that is satisfying for a repetitive work tool is different than an e-commerce site. Even within the same class of interfaces, different users may have widely divergent needs. What is important is that the design meet the expectations and needs of the people who must use the interface. Error Tolerant The ultimate goal is a system which has no errors. But, product developers are human, and computer systems far from perfect, so errors may occur. An error tolerant program is designed to prevent errors caused by the user’s interaction, and to help the user in recovering from any errors that do occur. Note that a highly usable interface might treat error messages as part of the interface, including not only a clear description of the problem, but also direct links to choices for a path to correct the problem. Errors might also occur because the designer did not predict the full range of ways that a user might interact with the program. For example, if a required element is missing simply presenting a way to fill in that data can make an error message look more like a wizard. If a choice is not made, it can be presented without any punitive language. (However, it is important to note that it is possible for an interface to become intrusive, or too actively predictive.) For those errors which are out of the control of the interface – system failures or other disasters - take a lesson from flight attendants and quietly, calmly guide the user through the process of helping the program recover from the problem. Some guidelines for preventing errors are: Make it difficult to take incorrect actions. Design links and buttons to be distinctive, use clear language, avoiding technical jargon, and be sure that dependent fields or choices appear together. Make it difficult to take invalid actions. Limit choices when possible to those which are correct, provide clear examples for data entry, present only appropriate navigation options. Make it difficult to take irreversible actions. Provide the ability to back track, provide means to undo or reverse actions, avoid dead-end screens. Don’t indiscriminately use confirmations – users become insensitive to them. Plan for the unexpected. Allow for users to add new entries, take exceptional routes through the interface or make choices you did not predict. Be polite about "correcting" mistakes that may arise from this lack of foresight. Easy to Learn One of the biggest objections to "usability" comes from people who fear that it will be used to create products with a low barrier to entry, but which are not powerful enough for long, sustained use. But learning goes on for the life of the use of a product. Users may require access to new functionality, expand their scope of work, explore new options or change their own workflow or process. These changes might be instigated by external changes in the environment, or might be the result of exploration within the interface. An interface which is easy to learn allows users to build on their knowledge without deliberate effort. This goes beyond a general helpfulness to include built-in instruction for difficult or advanced tasks, access to just-in-time training elements, connections to domain knowledge bases which are critical to effective use. Allow users to build on not only their prior knowledge of computer systems, but also any interaction patterns they have learned through use in a predictable way. Predictability is complementary to interface consistency. A consistent interface ensures that terminology does not change, that design elements and controls are placed in familiar locations and that similar functions behave similarly. Predictability expands this to place information or controls where the user expects it to be. This concept has been discussed in connection with Palm Pilot design– and especially important if you make an interface which goes beyond the boundaries of simple platform design standards. Good use of predictability requires careful user analysis and observation, but can make new functions easy to learn by providing controls where the user expects them to be. WORKING WITH THE FIVE E'S Finding the right balance between the usability characteristics for the specific design context is an important part of the user analysis. The difference in emphasis is helpful in understanding distinctions between user groups and in thinking through the implications for the interface design.
- Let’s talk about some concepts here of we all work together to effect the user experience. First of all, we have our business which DETERMINES what we are doing – the business authors the vision and goals, creates the requirements, and of course controls the money. Technology ESTABLISHES the foundation for the business and creates objectives to achieve goals. Technology works with the business to prioritize objectives, establish relevance and logic. Their work together is GOAL DRIVEN. Design handles the aesthetics and creativity, giving clarification to the customer experience. Working with business, design is concerned with branding and messaging, making sure things are consistent visually and experientially. Design also works with technology to develop products that simple, effective, and usable. So at the center of everything we are doing as an organization, we have UX. The focus is on the customer and their experience validates what we are all doing. So, who is involved in UX? We all are. At the center, this is where UAI lives and breathes. We ALL affect the user experience in some way, and make important contributions in the overall process. We should also distinguish UX and usability: According to the definition of usability, it is a quality attribute of the UI, covering whether the system is easy to learn, efficient to use, pleasant, and so forth. Again, this is very important, and again total UX is an even broader concept.
- Usability is defined by 5 quality components: Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? Efficiency: Once users have learned the design, how quickly can they perform tasks? Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Satisfaction: How pleasant is it to use the design? Why Usability is Important On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a website, they leave. If a website's information is hard to read or doesn't answer users' key questions, they leave. Note a pattern here? There's no such thing as a user reading a website manual or otherwise spending much time trying to figure out an interface. There are plenty of other websites available; leaving is the first line of defense when users encounter a difficulty. The first law of e-commerce is that if users cannot find the product, they cannot buy it either. For intranets, usability is a matter of employee productivity. Time users waste being lost on our intranet or pondering difficult instructions is money we waste by paying them to be at work without getting work done. Current best practices call for spending about 10% of a design project's budget on usability. On average, this will more than double a website's desired quality metrics and slightly less than double an intranet's quality metrics. For software and physical products, the improvements are typically smaller — but still substantial — when you emphasize usability in the design process. For internal design projects, think of doubling usability as cutting training budgets in half and doubling the number of transactions employees perform per hour. For external designs, think of doubling sales, doubling the number of registered users or customer leads, or doubling whatever other desired goal motivated your design project. What if I could save everyone on the company just 1 minute a day! What would be that ROI?
- UX has become a neologism, a new expression. When something has “good UX” it is an implied meaning of having the core components of UX (research, personas, context, IA, interaction, interface, etc etc…). It’s not really necessary or desirable to tack the word design onto the end anymore. It’s a distraction and leads people down a parallel but misguided path to thinking that UX = User Interface Design. The interface is not the solution. That’s the true heart of the battle between UX and those who only want UI – or don’t know the difference.
- Since we are discussion UX and usability: According to the definition of usability, it is a quality attribute of the UI, covering whether the system is easy to learn, efficient to use, pleasant, and so forth. A user interface is anything that ties the human factor to a device or situation. Again, this is very important, and again total UX is an even broader concept.
- These are statistics to use from analyst reports that talk to costs of acquiring customers, costs of servicing them. All indicating the importance of moving that online vs other channels in person or phone. Yet, data also shows organizations still have long ways move them online ( 94% new accounts in person or phone), and those that are already online are still having challenges in being able to close those transactions. Because the user experience doesn’t support the 5 E’s we talked about, they will still transition to those higher-cost channels. You can use this data to help build a business case simply by saying, "If you can transition 20 percent of your customer-enrollment online, how could you quantify the impact? " If they don’t have statistics then use these..
- Social, In-Context, Fun
- Innovation Nike saw a 37% rise in sales of NikeID Small chunks, My point is that Innovation does not have to happen at a large scale, smaller innovations can have a huge impact
- Understanding that a shiny new enterprise web application is not much use if employees refuse to adopt it! So what exactly is a killer app? Jargon in the computer industry for an application program that intentionally or unintentionally gets you to make the decision to buy into the system the application runs on. For new products and platforms, success can depend on the existence of that one killer app that will motivate potential customers to invest and to change their behavior. VisiCalc, the first spreadsheet – to a large extent, that drove the adoption of personal computers in the workplace Or Adobe PageMaker, that enabled the desktop publishing revolution. But I think we can go further....I came up with the definition of a Killer app as: one that “makes it easier to do the things you already do." That may sound non-intuitive, or not innovative, but innovation is disruptive in nature! So that makes things, simple, right? If we want to deliver an enterprise transforming application, all we need to do is build something that’s better than whatever went before. And it doesn’t matter whether you’re talking about insurance claims processing application eBilling software Print on demand solutions Case record management To date, to build something better meant a new technology doodad, but really what this means is the design of these solutions needs to becomes less technology-centered, and more user experience centered. What are some things to look for: Be Dynamic; To be a killer app it has to do a lot. Not just 1 thing really well. We’re talking Swiss army knives here. Not switch blades or scalpels. Ease of use; The app has to be self explanatory. If it requires a tutorial or more than 2 minutes to figure out we have failed. Good customer support; self help, and social support Engaging; Does it make me want to use it? Does it make me want to show my social groups the cool stuff I get to do Bang for the buck; Is it worth it? The price of a phone isn’t what you pay when you get it. It’s the price you pay to use it. That means the data plan & the apps that make it worth owning
- We are no longer asking users to fit themselves into database-centric user experiences What we do instead is build and ultimately design applications based on the transactional goals and emotional desires of users in the context of an activity. DESIGN for OUTCOMES! To do this we engage customers and the organization to help us define and design the aspects of experience. This process involves research, requirements, user interface mockups and validation, usability testing and experience optimization which continues even after launch.
- Customer-Driven Enterprise different in every way Enterprise systems were not intended to address cross-firewall Enterprise technology focused innovation and energy at the core of TRANSACTION scalability and data systems performance – not the “last mile” of these systems where most interactions occur – where users INTERACT Can’t dictate to the user how to do business with you– they want choice and personality. It’s time to make the web the interaction hub for business, some significant things have to change. Our Users just want it to work! Users do not care how many back end systems there are, or what technology was used! The way people access & use software is changing User expectations are being driven by consumer like experiences (consumer experiences, social interactions, mobile apps) How applications are built is changing (multi-screen, multi-device, anywhere anytime)
- Customer Driven Enterprises must strive to achieve higher levels of customer engagement through online channels, and this means they must easily, quickly, and cost effectively provide fresh, personal, relevant content anytime, anywhere, on any device, all through a consistent and dynamic end-user experience. Managing and optimizing the user experience across all channels including the Web, mobile, social networks, and more – must now be considered in this new era of engagement.
- Innovating on both sides of the glass Describe In Front of the Glass Great user experience Simple Easier Effective Useful Useable Desirable Describe Behind the Glass Services that the user experience in front of the glass depends on
- Define the UX process Well prescribed user centric ROI focused approach Discuss each part of the definition in details Well prescribed: leveraging best practices User centric: de-focus on technology and focus more on end-users ROI focused: focus on both; meeting your users needs and meeting your business goals and business aspirations Discuss Process Focus on getting there quickly - 1st release within 10% of Project Timeline Help customer build visions and roadmaps toward those visions Releasing early and releasing often
- Why should developers care about UX and the research that accompanies it. Dr. Clare-Marie Karat has done a great deal of research on ROI of Usability investment. She found as a rule of thumb that every dollar spent in solving a problem in design, you save 10 dollars in development and you save 100 dollars in post release upkeep and changes. SO, UX research early on can save your time and resources The power of 10 in return on investment for User experience…
- Ethnography - is the systematic study of people and cultures. It is designed to explore cultural phenomena where the researcher observes society from the point of view of the subject of the study What: Anthropological approach focused on individual and group behavior in context. Uses contextual observation, interviews, diaries, and artifact collection to investigate customs, rituals, and myths. Why: Provides rich insights into behavior, experience, and expectations within a system and can reveal unmet needs and opportunities for teams to differentiate their products and services. Survey - consist of a set of questions used to assess a participant’s preferences, attitudes, characteristics and opinions on a given topic. As a research method, surveys allow us to count or quantify concepts We can use surveys for a variety of purposes including: Gathering feedback on a live product or during a pilot; Exploring the reasons people visit a website and assessing their experience of that visit (such as a True Intent survey); Quantifying results from qualitative research activities such as contextual enquiry or interviews; and Evaluating usability, such as the System Usability Scale. Surveys can be an effective method of identifying: Who your users are; What your users want; What they purchase; Where they shop; What they own; and What they think of your brand or product. Contextual Inquiry Contextual inquiry is a semi-structured interview method to obtain information about the context of use, where users are first asked a set of standard questions and then observed and questioned while they work in their own environments. The four principles of contextual inquiry are: Focus - Plan for the inquiry, based on a clear understanding of your purpose Context - Go to the customer's workplace and watch them do their own work Partnership - Talk to customers about their work and engage them in uncovering unarticulated aspects of work Interpretation - Develop a shared understanding with the customer about the aspects of work that matter The results of contextual inquiry can be used to define requirements, improve a process, learn what is important to users and customers, and just learn more about a new domain to inform future projects. Formative Usability Formative evaluation is a type of usability evaluation that helps to "form" the design for a product or service. Formative evaluations involve evaluating a product or service during development, often iteratively, with the goal of detecting and eliminating usability problems. One important aspect of formative evaluation is that the audience for the observations and recommendations is the project team itself, used to immediately improve the design of the product or service and refine the development specifications. Evaluative Usability Evaluative research to prove out product ready to ship and 360 customer feedback post ship. Driving Analytics into our applications for ongoing intelligence gathering.
- Our approach to creating an experience model: Become very familiar with the real world phenomenon you want to model (ethnography, video diaries) Create a comprehensive list of entities and their relationships Sketch the processes that occur and the data that is exchanged Group entities and processes that are similar Consolidate and simplify
- Our approach for creating personas Review existing customer data and web analytics Conduct in-depth customer research, either through on-location interviews or ethnographic studies Determine customer needs, wants, motivations, and purchase processes relevant to web, mobile phone, tablets, and/or in-store technology Determine the factors that impact interactive behavior Create real customer profiles that illustrate range of values for key variables Operationalize variables using quantitative methods (valid and repeatable) Create personas that represent each distinct segment Prioritize personas based on value to the company (quantitative) Develop a UX strategy to engage top personas Quantify real impact, refine the model Level of knowledge in the product category Awareness of competitive offerings Willingness to surrender personal information Willingness to sign up for communications Need for detailed explanations prior to purchase Need for personal hand-holding after initial setup Ability to read text of various sizes and colors on a device Tendency to check many competitors prior to a purchase Price sensitivity Number of devices used Readiness to use online training to learn new capabilities
- Today for example a person may be looking for a certain bit of data. Our approach is to dump a grid on the screen with 4000 records???? Why? We must focus on the need of the user at the moment of interaction. What is the user looking for, and design for that.
- Before I talk about the 4 key pillars (Process, Social, Content & Applications, and Analytics) I want to make mention of the elements that surround it. Channel. It is imperative that any modern UX platform is able to deliver not only seamless multi-channel experiences but (increasingly important) multi-device experience from a single process/content repository/Application/Site. The importance of channel is critical because it also informs Context. Context drives the customer experience as it takes into account information about the customer (and their profile), the process invoked, the channel (or device) being accessed and d. the location, in order to deliver the most appropriate and personalized experience possible. And finally we must also consider Co-existence with established enterprise systems and architecture. Many of the enterprise architectures I see have been built out over many years, are rich in back-office process efficiency (ERP, SCM), provide adequate customer data stores through CRM, and are driven my BPM solutions designed to operate the business more effectively. Without a clear focus on the needs of ‘the customer’ merely replacing these systems by swapping them for a ‘red-stack’ or ‘blue-stack’ will do little in the short to medium term to drive competitive advantage in a rapidly evolving, consumer-driven market. So now to the 4 pillars. Each of these pillars forms a link between the existing capabilities of HP IT to deliver better experiences to our customers, and to deliver that experience across all of the channels through which our customers will choose to interact. The key thing about UX is that it turns the development of traditional systems and applications on its head by effectively designing experiences from the ‘outside’ or customer-in, rather than ‘system-out’, We call it “Design for Outcomes” . As a platform, UX must also be highly agile and provide the tooling and infrastructure to respond to changes in customer behavior and market conditions in a milli-fraction of the time of traditional applications. The Process capabilities around UX, it is not enough to think merely Business Process Management. We must also think about and design processes from the perspective of customer first and think Customer Process Management. If this can be achieved it’s a clear win-win from the offset. If we separate and design the customer process from the outside-in we will find a way to connect this extrapolated, UX/UI-driven customer process design layer to the existing BPM layers of the enterprise therefore delivering agility atop existing, established process but effectively adding a layer of dynamism in the process. The win-win comes from the fact that in addition to achieving greater business agility the processes will be easier for the customer to use and more attractive for the customer to engage with. Social should not be thought of as an ‘extension’ to our Customer’s Experience but is in effect the essence that allows our customer to form a deeper and longer lasting relationship. Social can lead to customer co-value creation and this should be central to an organizations strategy around attracting, engaging and servicing its customer effectively. Social also does NOT simply mean Twitter/Facebook feeds, to think this undermines the real value of social business. It’s also about how the user, as a brand, orchestrate a social strategy utilizing social tools to make their brand experience more engaging and where the value of that can be measured from the value returned by your engaged customer base. Value itself can be defined by various metrics and it is down to each organization to identify what is truly valuable to them in their social interactions. For some it may be in monetary terms by increasing sales through social channels, for others it may be the value in addressing customer issues at the immediate point of concern and avoiding costly escalations where for some it may be merely in garnering careful and considered customer feedback that leads to product improvements or innovations. The power of Social, like beauty, is surely in the eye of the beholder. Content & Applications, this part is inextricably linked to Context though context does pervade across the entire Customer Experience / Customer Engagement Lifecycle. Through our UX Platform it is possible to unlock/re-use existing application content and deliver it to the user or customer in a more user-friendly and easily consumable fashion. Further, by leveraging existing application content we can maximize re-use of processes and pre-built integration and orchestrate these in a manner which is more customer-centric. The notion of Content & Applications is, in many ways, a conduit to unlocking the IT Holy Grail of ‘Fast IT’ delivery, effectively taking IT off the critical path of true business agility. From a purely content delivery perspective, aside from application content, it is imperative that the content delivered is personalized, tailored and is presented in the context of both the immediate customer interaction and in synch with their customer profile, location and any other relevant factors captured within the interaction. With Analytics & Optimization I return to an old parable I learned, the concept of “if you can’t measure it, you can’t manage it”. Analytics at every stage of the customer interaction is critical to ensuring that the Customer Experience is optimized and remains relevant at all customer touch-points. Analytical tools can provide valuable insight into how customers interact and how content presented is being consumed. This allows organizations to adopt an iterative approach to Customer Experience design by continually evaluating and improving the way in which the customer engages with their business.
- So what is user centered design? It’s an approach that puts a high priority on end user’s needs, wants and limitations at all stages of the design and development process. Products developed with UCD allow for highly effective outcomes that meet and even exceed user expectations. Tim has mentioned… at the end of the day, we want people to be so impressed with our software that they want to tell others about it. We want the “cool factor”.
- When working on our projects, it’s important to understand the WHAT, that being the business problem at hand and the corresponding requirements and scope. However, we have to change and improve our mindset. We need to think of HOW we focus on the user. I like to treat “HOW” as an acronym for “Helping Others Win” How will I save users time and make it easier for them? How do I increase efficiency by leveraging technology? How can I help the user efficiently meet their goals and needs? This represents a great opportunity for innovation which can, in turn, help UAI make a significant difference in the HP turnaround. Even more significantly (in the words of our fearless leader) “Good UX can change the overall process of how things are done” We can improve processes and become leaner, more efficient, profitable, and happier.
- Good design results from a systematic application of principles and consistent adherence to a process.
- An additional resource that helps “bridge the gap” so to speak between design and development is the HP Intranet UI Development Kit. This kit is a framework based on bootstrap and contains many UI elements, interactions, and widgets that utilized Jqery, CSS3, and HTML5. We are working toward integrating our production-ready design deliverables with the UDK to help increase development efficiency and save HP $$$.
- Elements are the building blocks of the visual world, even interfaces
- Interactive elements almost exclusive to digital media. Present many more opportunities, but also unique challenges Sequence: Sequence may be thought of as a progression, the visible experience of movement or change. Sequence in the visual sense is a series of events which lead the eye in a specific direction or exhibits a logical order. A line of trees becomes a sequence if the eye automatically follows from one tree to another. Designers utilize this principle to create an experience by-visually linking one event with another in order to direct the eye to a desired point. A logical sequence unconsciously builds excitement, an anticipation of something more to experience. A pleasant type of rhythm develops in a properly planned sequence which imparts the feeling that one is, in fact, progressing in some direction. A design that incorporates a sequence creates a pleasurable experience for those who move through it rather than a static feeling of monotony. Motion: Motion affects our perception of detail. When the observer is in motion, fine detail or subtle differences in texture are lost; the observer relies on color and form as an aid to identification of objects. When the observer is stationary, motion attracts interest; the eye tends to follow the motion or to determine what is moving. Slow motion attracts attention to detail in the composition of objects rather than in the objects themselves. The motion in such things as fire and rushing water accounts for the ability of these features to attract and hold attention for long periods of time.
- These conceptual principles guide how you should put the elements together. I’ll describe these in more detail and show some examples.
- Visual design boils down to unity and variety. Variety is created by contrast. I’ll show some photos to clearly convey each type of contrast as well as some digital examples. Value is the relative lightness or darkness
- The eyes are drawn to the areas of highest contrast, in this case, the top banner with the ampersand and the ‘important links’ on the side. The Designer thought these were the most important pieces on the page.
- Contrast in shape. Having a single element differ, creates heightened interest and directs attention This curve amongst a screen full of hard lines prevents too much unity – an overload of text and rectangles.
- Size contrast not only provides interest and keeps the eye moving around, but it is also an easy way to create hierarchy. The image on the right. Left top section is more important, indicated in part because of its larger size. Imagine if the title was the same size as the date and the color swirl was the same size as the color swatches. This example shows contrast in size, color, and shape.
- Texture is a tricky thing. You want to use it to create interest, as well make buttons look like you can push them. But you have to be careful or else you’ll dive into the uncanny valley.
- Contrast in rhythm helps create patterns and expectations, while providing a balance between unity and variety. It also creates a structure in which to identify different types of information in digital media.
- Contrast in Density allows the user’s eyes to rest, while providing enough information. If everything is spread equally, then intelligent grouping is not achieved, leaving the user with an unclear hierarchy.
- Balance is the equal distribution of visual weight in a design. Visual balance occurs around a vertical axis; our eyes require the visual weight to be equal on the two sides of the axis. We are bilateral creatures and our sense of balance is innate. When elements are not balanced around a vertical axis, the effect is disturbing and makes us uncomfortable.
- The website for Kite Experience, shown below, illustrates this concept well. Many elements and blocks of content are centered and are evenly proportional on both sides to create bilateral symmetry, and we can see how sections of content are kept to the same size and then translated across the page. Even when this grid is broken up, the proportions still match up to compensate for the difference.
- You’ll find this concept exemplified on the website for The Fashion Sketchpad shown here. The result is a design that is creative and visually appealing. Note that balance is achieved through visual weight: the purple is heavier visually, but is balanced by the abundant use of the color aqua to the right. Rather than mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that, despite their differences, they equalize the weight of the page. Asymmetrical balance is used often on the web due to its versatility. If you take a look at most two-column website layouts, you’ll notice that the wider column is often lighter in color - a tactic that creates a good contrast for the text and main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in another way, in order to create balance within the layout.
- Motion or movement in a visual image occurs when objects seem to be moving in a visual image. Purposefully guiding the users around the image, screen, page, etc
- Keeps the user interested and starts them with the most important parts of the interface. A big part of keeping users engaged is keeping their eyes on the screen. The diagonal placement of elements reinforce the feeling of movement and action.
- Making some things more important than others. This principle is achieved using the rest of the principles. This example shows hierarchy achieved through value contrast and direction.
- Objects that are bigger demand more attention. Using size as a hierarchal tool is an effective way of guiding a viewer’s eye to a particular portion of the page. Because size is one of the most powerful forms of organization, it’s important to correlate size with importance in a design. The biggest elements should be the most important in most cases; the smallest elements should be the least important.
- Color is an interesting tool because it can function as both an organizational tool as well as a personality tool. Bold, contrasting colors on a particular element of a website will demand attention (such as with buttons or error messages or hyperlinks). When used as a personality tool, color can extend beyond into more sophisticated types of hierarchy; Using lush, comforting colors can bring an emotional appeal to a page. Color can affect everything from a websites brand (ie: CocaCola Red) to symbolism (ie: cool, subdued colors). Advanced applications of color can even be used to "classify" information within a hierarchy, as in the following example:
- Finally, in terms of your design toolbox, this is a summary page of guidelines and helpful resources that are available to you.
- So what is my ask of you? To take the leap. We as an industry, need to work with our customers to dream BIG and innovate to match the vision. The first leap – think design over system – compatibility is necessary but not sufficient. These can connect and be compatible with existing back end systems, compatibility is necessary but not sufficient. We need to do more. The second leap – realize that the web can’t be the hub of interaction unless it covers the full spectrum – acquiring, servicing, and maintaining communications of how enterprises and their customers want to act The third step – think about all the services we have today and how can we rework them more effectively – development tools, access points, solutions – we work with people that are committed to thinking differently about this generation of solutions. We will create and provide the best user experience – companies with a design heritage who understand how to apply the usability principals and delight their customers will succeed. Up to you to choose the old way or the new way