Ux introduction training

UX Training Course

  1. Tim Huff
    UX Training Course
    Transcript Header:
    Ux introduction training
    Transcript Body:
    • 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
    View More