Download to read offline
Uploaded bySteven Hoober
Mobile Usability and User Experience
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.
Marketingā¦
More Related Content
Similar to Mobile Usability and User Experience
More from Steven Hoober
Mobile Usability and User Experience
- 1. 1 Mobile Usability & UserExperience Master Class Steven Hoober 4ourth Mobile #GPeCSummit
- 2. 2 Agenda 14:00 - 15:30Session 1 Designing Ecosystems 15:30 - 16:00 Coffee Break 16:00 - 17:30 Session 2 Authentic Digital Experiences
- 3.
- 4.
- 5.
- 6. 6 Program Architect Product Owner Another ProductOwner User Experience
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. 16 EXERCISE: Letās make ourown service.
- 17.
- 18.
- 19.
- 20. 20 āThe first principleis that you must not fool yourself ā and you are the easiest person to fool.ā ā Richard Feynman
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. 29 What is theproduct? 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 shortsentence, 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.
- 32.
- 33.
- 34.
- 35. 35 Information Architecture is notjust 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 andcomplexity.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. 58 1,333observations on thestreet 19academic studies correlated 120,626,225 touch events 651observations in schools, offices and homes 31analyzed POV videos in context
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. 66 Tertiary Functions behind menus Secondary Actionsalong the edges Primary Center of page Secondary Actions along the edges
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 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
- 78.
- 79.
- 80.
- 81.
- 82. 82 Steven Hoober steven@4ourth.com +1 816210 0455 @shoobe01 shoobe01: www.4ourth.com 4ourth.com/Touch 4ourth.com/Training 4ourth.com/TouchTemplate
Editor's Notes
- #2Ā 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ā¦
- #3Ā 2
- #4Ā 3
- #5Ā 4
- #6Ā 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.
- #7Ā 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???
- #8Ā 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ā¦
- #9Ā 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.
- #10Ā You need all these people because complex systems require complex solutions. Not that this means confusing and cluttered.
- #11Ā 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.
- #12Ā 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.
- #13Ā 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.
- #14Ā 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.
- #15Ā 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.
- #16Ā 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.
- #17Ā 16
- #18Ā 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.
- #19Ā 18
- #20Ā 19
- #21Ā So, you canāt trust your gut instinct, surveys and focus groups. What do you do?
- #22Ā 21
- #23Ā 22
- #24Ā 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.
- #25Ā 24
- #26Ā 25
- #27Ā 26
- #28Ā 27
- #29Ā 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.
- #30Ā 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.
- #31Ā 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.
- #32Ā ā¦ 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.
- #33Ā ā¦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.
- #34Ā 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/
- #35Ā 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.
- #36Ā 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.
- #37Ā 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.
- #38Ā 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.
- #39Ā 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.
- #40Ā 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.
- #41Ā 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ā¦
- #42Ā ā¦or simply change your environment, and only notify only if you bother to go check. Usually because something is wrong.
- #43Ā 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???
- #44Ā 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.
- #45Ā 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.
- #46Ā If more comfortable with thinking about the user and their environment directly, this is a good place to use the Storyboard.
- #47Ā 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.
- #48Ā 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ā¦
- #49Ā 48
- #50Ā 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.
- #51Ā 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ā¦
- #52Ā 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.
- #53Ā 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
- #54Ā 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.
- #55Ā 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.
- #56Ā 55
- #57Ā 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.
- #58Ā 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ā¦
- #59Ā I know this, because I did a lot ā¦ A LOT ā¦ of research on it. Stuff quoted by others in their scientific papers.
- #60Ā 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.
- #61Ā What we know most of all is that people shift their grip a lot, between many methods.
- #62Ā 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.
- #63Ā 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.
- #64Ā 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.
- #65Ā 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.
- #66Ā 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.
- #67Ā 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.
- #68Ā 67
- #69Ā 68
- #70Ā 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.
- #71Ā 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.
- #72Ā 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.
- #73Ā Before we leave this
- #74Ā 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???
- #75Ā 74
- #76Ā 75
- #77Ā 76
- #78Ā 77
- #79Ā 78
- #80Ā Within what you control, just always remember to design for hands, fingers, thumbs, and PEOPLE.
- #81Ā You can follow these links to see all that I have written about, including more on the topics I covered today.
- #82Ā 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!
- #83Ā 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] ****************