Mobile Usability and User Experience
•Als PPTX, PDF herunterladen•
2 gefällt mir•503 views
This document outlines an agenda for a mobile usability and user experience master class presented by Steven Hoober. The class is divided into two sessions: the first focuses on designing ecosystems, while the second focuses on creating authentic digital experiences. The document provides exercises for attendees to complete and lists various usability evaluation techniques and resources.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (11)
Ähnlich wie Mobile Usability and User Experience
Ähnlich wie Mobile Usability and User Experience (20)
Mehr von Steven Hoober
Mehr von Steven Hoober (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Mobile Usability and User Experience
- 1. 1 Mobile Usability & User Experience Master Class Steven Hoober 4ourth Mobile #GPeCSummit
- 2. 2 Agenda 14:00 - 15:30 Session 1 Designing Ecosystems 15:30 - 16:00 Coffee Break 16:00 - 17:30 Session 2 Authentic Digital Experiences
- 4. 4
- 5. 5
- 6. 6 Program Architect Product Owner Another Product Owner User Experience
- 7. 7
- 10. 1010
- 11. 11
- 12. 12
- 13. 13
- 15. 15
- 16. 16 EXERCISE: Let’s make our own service.
- 18. 18
- 19. 19 SLIDE
- 20. 20 “The first principle is that you must not fool yourself — and you are the easiest person to fool.” – Richard Feynman
- 23. 23
- 28. 28
- 29. 29 What is the product? You are in an elevator with a chief executive of your company. He asks, “what are you working on these days?” In one short sentence, using plain (non-technical) language, explain what the product is. What is its one, main purpose? Pick a single feature of the product you think is critical and express it in as few words as possible. 1-2 word phrases are perfectly fine (“receive cards”); these do not need to be complete sentences. Do not consider technology, UI, wording or other content at all. Now, answer it again. You may answer as many as five times in total. Do not restate any points; each one should be unique. What one problem or concern does it solve? Products are pursued as a result of a business opportunity, or a business problem. Consider any opportunity to be a “problem” in the sense that its something the company is not pursuing (so a missed opportunity for now). Who will use this product? Instead of trying to design the product for everyone, we will be focusing on feature sets, and interface designs that meet the primary needs of a small but focused set of users. These
- 30. 30 In one short sentence, using plain (non-technical) language, explain what the product is. What is its one, main purpose? Pick a single feature of the product you think is critical and express it in as few words as possible. 1-2 word phrases are perfectly fine (“receive cards”); these do not need to be complete sentences. Do not consider technology, UI, wording or other content at all. Now, answer it again. You may answer as many as five times in total. Do not restate any points; each one should be unique. What one problem or concern does it solve?
- 31. 31
- 32. 3232
- 33. 3333
- 35. 35 Information Architecture is not just navigation.
- 36. 36 “Error is viewed, therefore, not as an extraneous and misdirected or misdirecting accident, but as an essential part of the process under consideration.” – John VonNeumann “Error in Logics,” 1952
- 37. 37 Embrace failure and complexity.
- 38. 38
- 39. 39
- 40. 40
- 41. 41
- 43. 4343
- 44. 44
- 45. 45
- 46. 4646
- 49. 49
- 50. 50
- 51. 51
- 52. 52
- 53. 53
- 54. 54
- 56. 56
- 57. 57
- 58. 58 1,333observations on the street 19academic studies correlated 120,626,225 touch events 651observations in schools, offices and homes 31analyzed POV videos in context
- 59. 59
- 61. 6161
- 62. 62 65%60% 84%
- 63. 63
- 64. 64
- 65. 65
- 66. 66 Tertiary Functions behind menus Secondary Actions along the edges Primary Center of page Secondary Actions along the edges
- 68. 68
- 69. 69
- 70. 70
- 71. 71 Secondary Actions along the edges
- 72. 72 Secondary Actions along the edges
- 73. 73
- 74. 74
- 75. 75
- 76. 76
- 77. 77 Resources • uxmag.com/articles/an-introduction-to-designing-for- imperfection • uxmatters.com/mt/archives/2016/09/mobile-ux-design- approaches-workshops.php • uxmatters.com/mt/archives/2015/03/tools-for-mobile-ux- design-task-flows.php • uxmatters.com/mt/archives/2016/11/succeeding-with-field- usability-testing-and-lean-ethnography.php • uxmatters.com/mt/archives/2017/11/design-craft-and- manufacturing-for-digital-products.php • uxmatters.com/mt/archives/2019/01/adaptive-information- design-and-the-box-diagram.php
- 82. 82 Steven Hoober steven@4ourth.com +1 816 210 0455 @shoobe01 shoobe01: www.4ourth.com 4ourth.com/Touch 4ourth.com/Training 4ourth.com/TouchTemplate
Hinweis der Redaktion
- Good afternoon everyone and thanks for coming. How is my voice? I have a selection of microphones, but if you can hear me, I was just going to talk to you without them. Also, this is my work uniform, but I find it tremendously hot in this town, so I’ll ditch the jacket if you don’t mind me being more casual??? OKAY… Our session will be broken into two parts…
- 2
- 3
- 4
- Today, I am going to talk a lot about designing and building products. Products that fit your organization, and don’t copy someone else’s ideas. And most of all are usable by real people. Your customers.
- How do we do that? Well, for clients, to achieve goals, as parts of a team. CLICK Tell me who is here today. Raise your hand if you are a UX, UI, or other Designer… Writer, Content, Graphics? Presentation Layer Developer? Software Developer? Data Architect, DBA, or anything else implementation side? DevOps? Product Owners or similar, like executives or founders … Okay, guys keep your hands up — Stand???
- We’re going to make some teams for the rest of this session at least, and you product owners are my team leaders for that, as you are really. Organize so you have one table for each group. ETC. CLICK And everyone else distribute yourselves so if possible we have at least one dev, one designer, and so forth for each group. Don’t cluster up in general. If a whole team from one company came, your choice if you want to stick together or break up…
- Teams are important. I used to be a programmer, a database designer, I wrote the first CSS used for a major corporation. I have written whitepapers on technology for Qualcomm, and standards submissions for the automotive industry. Because knowing a lot about everything is great. But DOING the work requires specialists. I am a UX guy. I know people, and how they use systems, so can design user-centered solutions from strategy to the screen. But it takes a team to make things. And the team composition varies by project. Some really need a pile of writers. Some need data scientists. No one needs A Developer, but often several different TYPES.
- You need all these people because complex systems require complex solutions. Not that this means confusing and cluttered.
- As designers, if not humans, successful products have always recognized they were part of ecosystems. Your simple website has password reset emails. How about ATMs? A second channel for banking decades before most people heard of the internet. Newspapers and magazines are designed not just to be readable, but to be appealing to the newsstand. And, to have room for mailing labels for home delivery. Everything has to work in multiple channels, or methods, and be able to change as technology and users change.
- Today, a popular magazine sells around 3 million subscriptions a week. Well, from the 60s or so through the 1990s, TV guide was vastly, vastly popular. They sold 20 million copies a week of this [IMAGE] in the US. What is all but a database dump you pay for, and which is also full of ads. You can see why the Internet did so well! The guys who actually gathered this data realized early on they didn’t make a magazine though. They had a data product.
- And when the first EPGs came along — the TV-Guide channel that is the first thing that came up when you turned on the early Cable TV systems — the data they had was all ready for it. They had already been storing short and long descriptions (reruns within a week don’t get the full description, or maybe space is an issue), as well as the concept of meta-data well before anyone called it that.
- Simplifying the story some, what with mergers and acquisitions over the decades, the content we see today on our much more high tech cable, satellite or streaming systems is not just the same basic format, but in some cases is the SAME EXACT CONTENT. There’s no need to write a new description for that Lawrence Welk show every time it airs, so the original 1979 description is still pulled from the database and used today. It’s all just data. Derived, with some improvements for history, from http://karenmcgrane.com/category/content-strategy/ though I saw it presented instead.
- This is what annoys me about almost everyone selling Anything As A Service. They want you do start from scratch. But the world is full of info, and most often improvements to that are what we want. This is the same old subway data (and this is real, not a mockup) projected onto the sidewalk, in context. So people walking down the street can see what the trains right under their feet are doing, to determine which one to take, and how long it will take them. Products, are about data, and people, NOT devices and connections.
- Not least of which because systems change. In radical ways. If you are bad at designing for mobile you can get away with the same old stuff on a tiny screen. IoT and wearables are very different. What’s next? Who knows? But if you design for systems not A System, you are better prepared for it. STOP designing to pixel dimensions. Stop designing for phone and tablet, because look here: There’s no distinction, but a continuum of devices.
- 16
- The most important thing when designing a product is to Absolutely Not Draw It. Not yet. Not for a while. And when you do start drawing, it’s boxes and arrows, long, long before colors and icons. The first thing is to understand, write down, and share what you know with the team. Conventional wisdom is rumor and innuendo. Never work off your gut instinct, or What You Heard Once. Go get the data, and don’t be fooled by bad data.
- 18
- 19
- So, you can’t trust your gut instinct, surveys and focus groups. What do you do?
- 21
- 22
- Be prepared for surprises. You won’t find out about these from surveys and questions because they don’t think of these as processes they perform worth mentioning. Here, everyone at the client, even the sales staff who visits the customers weekly, just knew we needed to replace the old digital system with a new one. It took me going in there and using ethnographic methods to find they actually still do a hell of a lot of stuff on paper. They don’t want to, but it works, and Just Working is most important to most people.
- 24
- 25
- 26
- 27
- Okay, so there’s no way to simulate that and it takes years of training to be a good researcher, so no exercise with that. But DO try to get good user research done! BUT… before I go visit users, I try to elicit the institutional knowledge of the organization I work with. We workshop, getting everyone into a room and gathering information about current processes, methodologies, business practices, goals, complaints, etc.
- There are fairly formal ways to do this, which I like to talk about because they work so very, very well. If you just ask people what they know, they do not know. If you ask them to work together, they generally do not and someone takes over like in focus groups. But there are tricks to get the information anyway.
- Today, for the product you guys have all settled on, we’re just going to do one of the typical questions we need to define the product. It’ll be okay; we can use this to inform our design very well. Everyone take a Post It pad and a sharpie. And nothing else. This is one of the tricks, to keep the number of words you write down. Don’t let your participants pull out pens, or use bigger pieces of paper. Force them to boil it down to key thoughts. Then, you will all write down this, the one main purpose of the product. Then repeat that, one at a time, until you have no ideas. Keep it to yourself. We’ll share in a minute. Take FOUR OR FIVE MINUTES for this.
- … Now, we’re going to put them all on the wall. And once you have done that, feel free to move everyone else’s cards around, too. Not yet! Let me show you the next step.
- …And when you stop clustering, you will end up with this. Labeled groups of key features, and functions. Do that… NOW, and I’ll walk around and help as needed. TIME LIMIT: 5 more minutes to re-organize.
- DONE: I like these not just because it’s an effective data gathering method, or because it’s easy to make device-agnostic and user-centric, but because it’s a collaborative method. Inherently. It is set up to assure that everyone contributes equally. And I can even demonstrate this and do so in some workshops. http://www.uie.com/articles/kj_technique/
- Information Architecture is a term or concept I hope and pray you have heard. If not, pay special attention because this gets to my rant about the TV guide. IA is the underlying organization, structure and nomenclature that define the relationships between a product’s content and functionality. You can fix the UI any time. It is very hard to fix the underlying structure of your digital product. If I had to invest in one and only one part of a product: it would be a stellar IA.
- Navigation communicates to the user where they are and allows access to the features and information on the site or in the app, or printout, or DVD or whatever. But it’s an abstraction of the complete structure. IA is not navigation, but the structure you derive navigation from. IA is not just digital, or just about one channel. You can and should do most of the IA work before you have settled on a platform. I often do that, and use the structure to help define what features go on which platform. Or even to make informed choices about the platform needs. Information architecture is not about the UI, but the information, and good IA considers the expectations and experiences of the users.
- For a long time, we have assumed computers are infallible, but long ago they were not, and lately we have realized that in aggregate, there are still problems. Resilience engineering is something used to keep big, reliable services like Google, Facebook, Etsy, Flickr, Yahoo, or Amazon online. At a deep engineering level they follow practices and procedures to assure their systems are not brittle, and avoid failure or fail gracefully and can be fixed easily even with power failures, network breaks and typhoons. Resilience is usually defined as the ability of a system to absorb disruptions without tipping over to a new kind of order. A building when exposed to too much lateral ground movement settles into a state of “pile of rubble on the ground” unless you design it to resist the disruption of earthquakes adequately.
- You can’t prevent these problems, so you have to expect and plan for them. From our point of view, remember is that everything you do is too complex to adequately model and map. Assume you have always missed something, so you are prepared to deal with the unexpected, both in design and so you can modify your product over time to take advantage of new ways you find people using your information.
- I say there’s also something called Resilience Design. Here’s a simple example… Though I love my smartwatches, I also still wear normal dial watches. One is a dive watch, because it’s shiny, not because I am a diver or anything. It is one of those with a twisty ring around the outside. That part with the numbers here twists around. If you don't know, and I didn't until recently, this is used as a simple timer. But on mine, and on all dive watches (vs. Aviators watches), the ring only goes one way. The clicky detent lets it go counter-clockwise, only. WHY? … Because it's for timing remaining air. The ring might get bumped and change it's setting. Having it show less time might be inconvenient, but going the other way might kill you. And, you don't even need to know this. It just works. That's the sort of brilliantly-simple answer I am talking about with resilient design.
- Resilient design doesn’t just mean removing error messages, but embracing that people use your product in various ways. Providing alternative paths, like letting people “wait in line” at the DMV with text messaging.
- Or removing the whole principle of you asking a computer to do anything. We can collaborate with our computers, so they can analyze data and push it to you…
- …or simply change your environment, and only notify only if you bother to go check. Usually because something is wrong.
- So, now we’ll make our own IA that takes into account the user needs, and has no “happy path” but is flexible, and works in the real world. How???
- Well, start with the last exercise you did. Nothing you do is a dead end. It feeds straight into the next one. So, you may be able to simply take those affinity groups and start making those the organization. It doesn’t have to be pretty. Never worry about that.
- Remember to keep it user-centric, product-focused, and as simple as possible. There are many, many ways to draw this. I don’t care how you do it. And often, draw it several ways, to view it from different points of view.
- If more comfortable with thinking about the user and their environment directly, this is a good place to use the Storyboard.
- This is a more typical looking one. A “Sitemap” though I hate that term for various reasons. Note that many of these also empower you to think about data, and systems and connectivity. None of this is just about users, or just about any other one facet. Ideally, you never again make a document that disregards other layers of the stack. In this case, your data and interconnectivity is critical. Boxes are not just UI. Arrows are not all user commands.
- So, grab more paper and sharpies, and draw one for your product. Include what you need first, and don’t worry about the edges. Keep in mind resilience, so avoid error messages, settings, etc and see if you can keep the core information and interaction simple. Make it device agnostic. Don’t worry about what system the user interacts with, and if you have to design in context, pantomiming holding a phone, instead keep changing the context, and have them look at computers, walls, wearables, etc. 20 MINUTES…
- 48
- You recall how we took the findings of the post-it exercise, to make the task flow? Well if I had you all for a week, I’d continue with this. I have a good process to go from a basic concept, over several steps, to the UI layer. But… I can’t do it fast enough, so we’re going to skip ahead a bit, and start talking about how to put together screens. And for mobile, we always assume that is a flat glass touchscreen.
- Over time we’ve taken this flatness to new lows. We mock any other design style now as old. And now there are guidelines that we should add SOME dimensionality to the flat design. Some call it Flat 2.0 but I would not. But this all makes me crazy. Simply LOOK at your phone, or computer. Or your TV when you change the volume even. When your app or website has a dialog, it appears on top of the screen…
- Literally on top. Software is built in layers. Dimensionality in digital interfaces is REAL. When you click an item you open a new view and add to the stack.
- This concept is one reason dialogs work so well. The temporary condition is explicitly “on top” of the page. Because new views appear on top, and the reduced size indicates that it’s just a temporary condition, but the previous view is waiting for you
- SO of course you add shadows. To make clear whether something IS on top or just painted on,. This layering — and expressing layers — extends to components within a single page as well.
- Many things are not FLAT but are full of additional layers and they behave this way. Items on top block items below. Items scroll behind things, based on this layering.
- 55
- Touchscreens have been around long before Apple “invented” them. Before touch, and actually before the mouse, there were pens, or the “stylus” if you prefer. The use method is similar, and today all touchscreens can use a pen, but we tend to focus on the primary use case, fingers. By the late 1960s, light pens had come down to pen sized, and were usable on reasonably modern-looking systems to do tasks we’re familiar with in touchscreens: point, select, copy, paste, gesture, etc.
- When we talk about touch today we mean Capacitive Touch. That’s what’s used on ALL mobile phones, tablets and increasingly everything else remotely small these days. Computers, cars, everything. In capacitive touch, your finger is electrically detected by a grid of sensors. I can go on about the technology of touch alone for an hour…
- I know this, because I did a lot … A LOT … of research on it. Stuff quoted by others in their scientific papers.
- And we know a lot now. Good stuff you can put to use right away. We know that THIS widely-distributed chart is impossible. It’s not how thumbs work. Try to trace those edges sometime. My thumb makes popping noises and I can not even quite do it.
- What we know most of all is that people shift their grip a lot, between many methods.
- The more I watch people, the more I am amazed at how variable their interactions are. How they are comfortable changing their hand position. how they touch the screen in different ways to do different things with their devices, as they change tasks and context.
- We can use this data, not just to plan for obscuring, but because we can use it to do things like design for every orientation and not one way of grabbing. But… to first design phone interfaces for portrait and tablets for landscape.
- So where DO people tap? [CLICK] When you account for content position and different devices, you find that most taps are in about the center half of the page. This is true for phones, and tablets equally.
- We know that people are more accurate at the middle of the screen. And we mean pretty much any screen, any way they hold their phone or tablet. They also subconsciously know this — or it may be tied to their preference for reading in the middle — so are more confident at the center, but will slow down to tap corner or edge targets.
- And we know that this same basic area is where they LOOK also. So from this we can develop a model of how to design better interfaces.
- Yup, this is now the stuff I said in my keynote yesterday. But let’s apply it, and discuss when to use tabs, hamburgers or nothing. When to dock the header or footer — or both. Whether cards have any notable value over lists… or whatever is causing you worry and arguments.
- 67
- 68
- Most often after we discuss the information above people ask me how SHOULD they make their categories visible if you can’t use tabs and hamburger menus are only good for expected sections. Well, put them in the middle of the page. If the main thing you want people to see is the menu, then it goes in the center of the page. Your content is your menu. Also, it is important to understand your users, and not think like yourself. Most visitors — to most sites at least — do not come to the home page and then drill down by categories. They arrive by search, by referrals, even by links from your promotional emails or social media. You have to design the IA to reflect how people really work.
- What I mean is that you cannot solve your biggest design issues at the page level. You have to know how people get into product, to design the IA to reflect how people really work. And they usually will arrive by shared links, google searches, even your promotions. The categories are rarely that important, so things like wayfinding are more critical! For example, OLX always leads with categories as part of the title.
- While we’re talking about fixing problems for the way users work: Stop annoying them. The Aliexpress website regularly intrudes on the user flow, and ruins the 1,2,3 structure by adding a call to action to use the app. People visiting by the web probably do not want the app, so need the best web experience instead. In fact, it annoys people — driving them away, more than it is successful. Give them info to be helpful, but not intrusive, don’t make your goals more important than theirs, and don’t keep bugging them about it.
- Before we leave this
- Chyrons HERE, good: Bad: The one in OLX… Wait, it doesn’t have one… or does it… (multi-pages… step through as I scroll…) Oh, in the footer are more actions. But most users will miss these, and others are strewn around the page so may also be missed as users don’t know all the options available. Better would be a chyron, a fixed bar with all that info … SORTA MOCK UP???
- 74
- 75
- 76
- 77
- 78
- Within what you control, just always remember to design for hands, fingers, thumbs, and PEOPLE.
- You can follow these links to see all that I have written about, including more on the topics I covered today.
- You can read about my touch research, or buy a Touch Template to test out how touch-worthy your designs are. I even brought some with me. I’ll sell you one right now!
- And feel free to find me on social media, email me, and ask for these links, or ask questions that we didn’t cover today, or ran out of time for. I also do UX design and consulting, so if you need help with making your app, website, service, IOT product or anything human-facing better, talk to me about it. **************** [STOP] ****************