A quick introduction to web site/application user experience design: key concepts, trends, influences.

3. User experience + users’ feelings and thoughts about the system + marketing, branding and aesthetics User experience and usability Usability Pragmatic aspects: getting the task done as quickly as possible with as few errors as possible PET design ™ Persuasion, Emotion, Trust

4. User eXperience (UX) is about how a person feels about using a system Science (HCI) Practical aspects User eXperience ease of use efficiency satisfaction Practical aspects: HCI: Human-Computer Interaction subjective in nature dependent on the context of use still evolving User experience is:

5. Human-computer interaction (HCI) is the study of interaction between people (users) and computers . Computer science Computer graphics Artificial intelligence Computer vision Behavioral sciences Psychology Sociology Cognitive science Ergonomics Design Graphic design Information design Interaction design HCI

6. UX from user’s perspective Poor UX makes the user think a lot: I can’t find it… What is this? Do I have to read all this? Maybe it’s not here… What was that? I’d better google for it. Hmmm… But where…? Here it is. Oh, I see. OK, I’ll take it. Good UX doesn’t make the user think: I don’t understand… This frustrated user did not find what he was looking for, and is probably not going to come back. Good UX helps the user to achieve his goals and encourages to set new goals. And I’ll take that, too.

7. Poor UX: example of a time consuming interface Let’s see. “Quick Search”. That must be the same as “Search”, right? Do I have to click on that drop-down menu thing? All I know about the book is that it’s by Tom Clancy. Is Clancy a keyword? And what is a keyword, anyway? I guess I have to use the menu. Clicks on the arrow. “ Title. Author. Keyword.” OK. I want “Author”. Clicks “Author”. Types “Tom Clancy”. Clicks “Search”. 30 seconds of solving a problem, how to search for a book.

8. Good UX: example of getting a task done quickly OK. “Search books for Tom Clancy”. Types “Tom Clancy”. Clicks “Search”. 5 seconds and no problem. The efficiency of the search box is 6 times better.

9. How to achieve good UX Rules & Guidelines Testing with users Common sense Seeing the big picture Experience

10. Research Based Usability Guidelines Design Process and Evaluation Provide Useful Content Establish User Requirements Understand and Meet User’s Expectations Involve Users in Establishing User Requirements Set and State Goals Focus on Performance Before Preference Consider Many User Interface Issues Be Easily Found in the Top 30 Set Usability Goals Use Parallel Design Use Personas Optimizing the User Experience Do Not Display Unsolicited Windows or Graphics Increase Web Site Credibility Standardize Task Sequences Reduce the User’s Workload Design for Working Memory Limitations Minimize Page Download Time Warn of “Time Outs” Display Information in a Directly Usable Format Format Information for Reading and Printing Provide Feedback When Users Must Wait Inform Users of Long Download Times Develop Pages that Will Print Properly Do Not Require Users to Multitask While Reading Use Users’ Terminology in Help Documentation Provide Printing Options Provide Assistance to Users Accessibility Comply with Section 508 Design Forms for Users Using Assistive Technologies Do Not User Color Alone to Convey Information Enable Users to Skip Repetitive Navigation Links Provide Text Equivalents for Non-Text Elements Test Plug-Ins and Applets for Accessibility Ensure that Scripts Allow Accessibility Provide Equivalent Pages Provide Client-Side Image Maps Synchronize Multimedia Elements Do Not Require Style Sheets Provide Frame Titles Avoid Screen Flicker Hardware and Software Design for Common Browsers Account for Browser Differences Design for Popular Operating Systems Design for User’s Typical Connection Speed Design for Commonly Used Screen Resolutions Page Layout Avoid Cluttered Displays Place Important Items Consistently Place Important Items at Top Center Structure for Easy Comparison Establish Level of Importance Optimize Display Density Align Items on a Page Use Fluid Layouts Avoid Scroll Stoppers Set Appropriate Page Lengths Use Moderate White Space Choose Appropriate Line Lengths Use Frames when Functions Must Remain Accessible Navigation Provide Navigational Options Differentiate and Group Navigation Elements Use a Clickable “List of Contents” on Long Pages Provide Feedback on User’s Location Place Primary Navigation Menus in the Left Panel Use Descriptive Tab Labels Present Tabs Effectively Keep Navigation-Only Pages Short Use Appropriate Menu Types Use Site Maps Use “Glosses” to Assist Navigation Breadcrumb Navigation The Homepage Enable Access to the Homepage Show All Major Options on the Homepage Create a Positive First Impression of Your Site Communicate the Web Site’s Value and Purpose Limit Prose text on the Homepage Ensure the Homepage Looks like a Homepage Limit Homepage Length Announce Changes to a Web Site Attend to Homepage Panel Width Graphics, Images and Multimedia Use Simple Background Images Label Clickable Images Ensure that Images Do Not Slow Downloads Us e Video, Animation, and Audio Meaningfully Include Logos Graphics Should Not Look like Banner Ads Limit Large Images Above the Fold Ensure Web Site Images Convey Intended Messages Limit the Use of Images Include Actual Data with Data Graphics Display Monitoring Information Graphically Introduce Animation Emulate Real-World Objects Use Thumbnail Images to Preview Larger Images Use Images to Facilitate Learning Using Photographs of People

11. Research Based Usability Guidelines Scrolling and Paging Eliminate Horizontal Scrolling Facilitate Rapid Scrolling While Reading Use Scrolling Pages for Reading Comprehension Use Paging Rather Than Scrolling Scroll Fewer Screenfuls Headings, Titles, and Labels Use Clear Category Labels Provide Descriptive Page Titles Use Descriptive Headings Liberally Use Unique and Descriptive Headings Highlight Critical Data Use Descriptive Row and Column Headings Use Headings in the Appropriate HTML Order Provide Users with Good Ways to Reduce Options Links Use Meaningful Link Labels Link to Related Content Match Link Names with Their Destination Pages Avoid Misleading Cues to Click Repeat Important Links Use Text for Links Designate Used Links Provide Consistent Clickability Cues Ensure that Embedded Links are Descriptive Use “Pointing-and-Clicking” Use Appropriate Text Link Lengths Indicate Internal vs. External Links Clarify Clickable Regions of Images Link to Supportive Information Text Appearance Use Black Text on Plain, High-Contrast Backgrounds Format Common Items Consistently Use Mixed-Case for Prose Text Ensure Visual Consistency Use Bold Text Sparingly Use Attention-Attracting Features when Appropriate Use Familiar Fonts Use at Least 12-Point Font Color-Coding and Instructions Emphasize Importance Highlighting Information Lists Order Elements to Maximize User Performance Place Important Items at Top of the List Format Lists to Ease Scanning Display Related Items in Lists Introduce Each List Use Static Menus Start Numbered Items at One Use Appropriate List Style Capitalize First Letter of First Word in Lists Screen-Based Controls (Widgets) Distinguish Required and Optional Data Entry Fields Label Pushbuttons Clearly Label Data Entry Fields Consistently Do Not Make User-Entered Codes Case Sensitive Label Data Entry Fields Clearly Minimize User Data Entry Put Labels Close to Data Entry Fields Allow Users to See Their Entered Data Use Radio Buttons for Mutually Exclusive Selections Use Familiar Widgets Anticipate Typical User Errors Partition Long Data Items Use a Single Data Entry Method Prioritize Pushbuttons Use Check Boxes to Enable Multiple Selections Label Units of Measurement Do Not Limit Viewable List Box Options Display Default Values Place Cursor in First Data Entry Field Ensure that Double-Clicking Will Not Cause Problems Use Open Lists to Select One from Many Use Data Entry Fields to Speed Performance Use a Minimum of Two Radio Buttons Provide Auto-Tabbing Functionality Minimize Use of the Shift Key Writing Web Content Make Action Sequences Clear Avoid Jargon Use Familiar Words Define Acronyms and Abbreviations Use Abbreviations Sparingly Use Mixed Case with Prose Limit the Number of Words and Sentences Limit Prose Text on Navigation Pages Use Active Voice Write Instructions in the Affirmative Make First Sentences Descriptive Content Organization Organize Information Clearly Facilitate Scanning Ensure that Necessary Information is Displayed Group Related Elements Minimize the Number of Clicks or Pages Design Quantitative Content for Quick Understanding Display Only Necessary Information Format Information for Multiple Audiences Use Color for Grouping Search Ensure Usable Search Results Design Search Engines to Search the Entire Site Make Upper- and Lowercase Search Terms Equivalent Provide a Search Option on Each Page Design Search Around Users’ Terms Allow Simple Searches Notify Users when Multiple Search Options Exist Include Hints to Improve Search Performance Provide Search Templates

12. Help, Forms and Other Crisis Points Show the Problem display obvious error messages and alerts Language matters provide clear instructions Bulletproof Forms create friendly forms that are easy to complete Missing in Action overcome missing pages, images or plug-ins Lend a Helping Hand offer help that’s actually helpful Get Out of the Way eliminate obstacles to conversion (e.g. unnecessary ads, registration, navigation, etc.) Search and Rescue deliver the right results with smart search engine assistance Out of Stocks and Unavailable Items make sure unavailable items don’t become dead ends

13. Common Sense / Seeing Big Picture / Experience / User Testing often reveals this kind of problems: The Purpose of the Website is not Clear What is this website about? What can I do here? Lack of Visual Hierarchy & General Visual Tidiness Catching users attention and guiding his glance through the content Confusing Navigation / Structure Not user-oriented language, lack of explanations Too much text overall, but no single word said where most needed Lack of Fluency in Workflows User struggles to complete more complex tasks because of interruptions or just lack of guidance or help

14. › 1st wave — hardware: First, good hardware was the IT world’s critical differentiator. Now hardware is a commodity. › 2nd wave — software: Then it was all about who had the right software — companies that could create stable software with the right functionality ruled the industry. Now, software development is regularly outsourced and any large corporation can usually afford to buy the top software. It has also become a commodity. › 3rd wave — usability: As the curve again shifted, people’s successful interaction with software and websites—usability—became paramount. There’s still plenty more work to be done, but usability is becoming a “hygiene” factor, something people expect. › 4th wave — PET design: The new differentiator is now about designing for persuasion, emotion, and trust. Last but not Least: PET design ™

15. PET design ™ principles in action

16. PET design ™ principles in action

17. PET design ™ : after 10 fixes

19. How Metasite can help: 3 choices in the menu your site/system  Quick check and improve  top 10 fixes with improved screens your site/system  Measure usability  Usability score (repeatable over time) + detailed findings report your site/system  Create User Experience  screens & specification