UX Fundamentals

download UX Fundamentals

If you can't read please download the document

  • date post

    18-Nov-2014
  • Category

    Design

  • view

    478
  • download

    1

Embed Size (px)

description

 

Transcript of UX Fundamentals

  • 1. UX fundamentals What is UX? Why is UX important? What is good UX? What does the UX process look like? What are some common UX deliverables? MICHAEL MEIKSON USER EXPERIENCE DESIGNER www.meikson.com

2. UX is software interface design UX almost always refers to software interface design. It includes every aspect of the software or digital product that impacts a persons behaviors, attitudes and emotions when using it. All websites and apps are software. 3. Experience design predates UX Experience design has been an ofine practice for decades Typically refers to physical environments such as retail, tradeshows and events 4. Service design, too Many business processes are complex and must be carefully choreographed Pharmacies Call centers Starbucks 5. User means software The term user came into use in the 1970s to refer to the humans who were using new computer systems The term user experience was coined by Donald Norman in the mid 1990s In practice today, the term UX almost always refers specically to the design of software interfaces 6. Interfaces are everywhere Content Text Video Images Sound Interface Navigation elements Inputs & controls Page structure/layout Flow between pages/states 7. This diagram represents the interface itself. The content text, graphics, video, etc. goes in the boxes Interface only 8. Content is produced the same way its always been But the interface is totally different Distribution mechanism Context Content on the web ! ! INTERFACE CONTENT 9. FYI, your tv has one, too ! ! INTERFACE CONTENT 10. A quick case Lets dive right in 11. Why am I here? Case 1 12. 1. Where are the hotels and rooms? 2. Why am I looking at Kevin Spacey? 3. Oh, up there. Case 1 13. Original design showing hotel list in place by default Case 1 14. User needs are not that hard to gure out Advanced common sense aka Cognitive Science aka Behavioral Psychology aka Human-Computer Interaction (HCI) Rule #1 15. The user cannot do two things at once We have to guide them down the path we want them to take Rule #2 Home Find a hotel Look at ads Which path do we emphasize? 16. There is often a conict of interest between marketers and users Eventually, the users always win: they just go somewhere else Rule #3 17. Why is UX important? The amount of UX in your life is proportional to the time your company spends building sites and apps. 18. The media equation is shifting Advertising (paid media) is becoming less efcient Brands are investing more heavily in owned platforms (sites & apps) and earned media (social shares) 19. Banner ads are digital, but require little UX. ! The publisher controls the experience. The advertiser simply inserts content. Paid 20. Websites require UX. The brand is responsible for the content, the interface, the technology, the analytics, and any data or services offered. Owned 21. Mobile apps require UX They are also built differently from sites in that they are not HTML they are coded in native environments (i.e., iOS or Android) Owned 22. Social media is digital, but requires little UX. ! The platform controls the experience. The brand simply inserts content. Earned 23. The virtuous cycle of earned media Drive users to my site or social property Give them what they want Enable them to share their positive experience PAID OWNED EARNED 24. Users go online for everything If a purchase is more than a few bucks, most people will research it online before buying Sometimes, even smaller purchases get the same level of consideration 25. For agencies, all roads lead to digital Even if owned media is just a small fraction of an agencys business, most ad campaigns drive users to the web Its a key consideration during creative and media planning Sites & Apps Social Digital Ads Traditional Typical Agency Revenue Pie 26. UX connects to the business Many sites, apps and digital products are more closely connected to the business itself than ever before, expanding the denition of advertising. 27. Your clients are currently installing next-gen analytics systems which show media and purchase activity in real time These are the new success metrics Business metrics 28. Booking systems Can you work on a travel brand without considering Tripadvisor, Expedia, etc.? 29. Commerce Can you work on a retail brand without looking at Amazon? 30. Digital product If an agency wants to play in this space, it has to get technical 31. What is good UX? Empathy is a key component of UX. Its about what the user wants, not what the marketer wants. 32. Whats on the menu? Whats the price range? Where is it? Case 2 33. OK, OK. I get that I have to choose a location rst. Case 2 34. Wait, so where is the menu? Case 2 35. So theres no way to just scan the menu? I have to navigate this crazy thing? Case 2 36. Proposed design showing location auto- detect Case 2 37. Proposed design showing scannable menu with visual slideshow Case 2 38. Was this designed by an adult? Case 3 39. Original wireframe Case 3 Googlehttp:// Title Goes Here Ideas STORE LOCATOR Get gas prices now! City ST Zip GO >> Brand Features Go Here (could be promos, product announcements, news, causes, app launches etc.) Advanced Search >> All-American Grill Download Blackberry > Download iOS > Download Android > Hess Blackberry app Hess Android app Hess iOS app Get the HESS Express Mobile App Featured Brands IMAGE 1.99 Title of promo goes here and here and Lorem ipsum dolor sit amet, consectetur adipiscing elit. $ IMAGE 1.99 Title of promo goes here and here and Lorem ipsum dolor sit amet, consectetur adipiscing elit. $ IMAGE 1.99 Title of promo goes here and $ IMAGE 1.99 Title of promo goes here and $ Current Promos Store Locator Deals & Coupons HESS Cards HESS Apps Careers Contact Us Products Idea Box About Us 40. Early design sketch Case 3 41. Wow. Everything that sucks about the goverment -- now in website format! Case 4 42. Look, humans! And the names of forms that I actually use. And specic things I need to do Case 4 43. The goal of UX is speed Get to me what I want as fast as possible. Dont make me think. Dont waste my time. Dont put junk in my way. 44. UX is functional design Software has lots of parts that have to t together correctly in order to work. Like a building. Or a vacuum cleaner. Or a car. Consumers interact with all of these parts. 45. Wireframes are like blueprints 46. UX process & skills Form follows function 47. UX skillsets Advanced common sense Visual Design Software Development Project Management 48. A typical software design process 49. UX follows a specic, structured process It is very similar to architecture or industrial design The nal look (or skin) is dependent on the underlying structure Follow the process 1 2 3 50. Levels of increasing fidelity Schematic A conceptual layout indicating required areas of content and navigation. Also known as a low-delity wireframe. Design A graphical rendering of the nal interface suitable for production. Includes precise layout, color, typography, graphics & content. Wireframe A detailed layout specifying all components of the required interface and indicating relative sizes and positions of key elements. 51. Structure suggests design PRODUCTS LOOKS & TRENDS NEWS & OFFERSSCIENCEEXPERT ACCESS Personal Consultation My Account SEARCH ABOUT US Buy Now Country/Language STYLES BY STRUCTURE All Structures Fine Medium-Thick Curly STYLES BY LENGTH All Lengths Short Medium Long SHOW LOOK NAME LOOKS LOOKS HEADER GOES HERE 211 222 3 5 6 ...4 SHARE CALL TO ACTION HERE >> CALL TO ACTION HERE >> CALL TO ACTION HERE >> CALL TO ACTION HERE >> RELATED STORIES 04 Looks Landing Wed May 11 2011Modied Meikson, MichaelCreator 11 / 22Pantene 2.5 Change Doc Old site New Design New Wireframe 52. UX deliverables Start with broad strategy and gradually increase the level of delity. 53. Competitive analysis Whats going on around the user? What are the conventions in our space? What are my users likely to have experienced? 54. Deliverable System Assets Version 5 published July 24, 2009 by Nathan Curtis (nathan@eightshapes.com) 82 of 136 Criteria.Two-by-Two Description Ommy nosto eriurer ciduisim dolorem ercip ex eraesse elenibh elisit velit nos nullan utat. Ut utet aut ipsummy nonsequat, venibh ea corercilisit ad erit volore delis augiat velit voloreet, sit amet lum ad min utetuercilit autating ea consed dio odigna conullu tpatum incincil utatis adiat, volore dignibh ex eu feumsandre corem incing erostrud tin vulla ad et loborem zzrit vel er at dolore vulput luptatio delestie min henim nisit lut volorper sectet, si. AttributeAttribute Attribute Attribute Site Site Site Site Site Site Site Site Site Site Site Site Site Competitive analysis 55. Competitive analysis 56. Page Inventory Page Inventory Page Inventory C D Page Inventory A B Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Search Home Section Front Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Standalone Video Section Front Detail Page Search Home Purchase Complete Product Page section page landing page B DA C Competitive analysis 57. Personas Mental