�ݺ�ߣ

Editor's Notes

1. Good afternoon, everyone and thanks for having me! I should say before we begin that if you don’t understand my English well — even if a native English speaker and I just talk too fast — I will post this whole deck to �ݺ�ߣshare, BUT you can follow along right now with my speaker notes at 4ourth.com/123. That’s at the top of each slide also, in case you want to do it later. I am not going to tell you how big mobile is, how much growth you can expect. I’m gonna assume you all know that. But I will tell you…
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. Okay then: Mobile is not read top to bottom, and really not in an F-pattern. Content on mobile devices is read, and interacted with, from the inside out. The center gets the most views. This is true for phones, and tablets equally.
18. So, you might think that when you copy the UI for something like this, the key controls are the actions and input at the top and bottom of the viewport. [CLICK] but in fact the primary content and interactive area is the list in the middle of the page.
19. This is great! We love list and grid views. Just put your main content into them, in the middle of the page. Make sure menu bars, tabs, and status displays and action items on the top or bottom are SECONDARY. Think about how you use Twitter or Facebook or Email… you read the content in the center and May Sometimes compose new content, or go to another section using controls along the sides.
20. 20
21. 21
22. Just put your primary content in the middle [CLICK] Secondary information or controls VISIBLE along the edges as buttons or tabs [CLICK] Tertiary items are HIDDEN behind menus in the corners … When architecting your app or website, just take all the content and functions, and rank them: 1, 2, 3
23. Youtube really believes this. Check out this more complex page, with not just a single list of content, but several, even CATEGORIES, which many of you care about, and we’ll see more of in a moment. They trust that the center is the best place to look, and that people scroll and understand subsections. They didn’t add sub-tabs or pulldowns or menus or anything else that makes it more complex.
24. 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.
25. 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. So, you should spend a lot more time on your category labels, and other hints about which section customers are in — a practice called “wayfinding” — or offering things like related products. For example, OLX always leads with categories as part of the title. Not enough people do that.
26. 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.
27. Before we leave this example, let me talk about the docked headers and chyrons, as shown here. The content scrolls but this stuff stays in place forever so the user can get to it when they need to.
28. OLX doesn’t think they need one. But… as I scroll… some buttons appear at the bottom. But who will scroll to the end of every page? And other functions 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 in one place. Want to drive the next action: you have to let people know the action exists at all!
29. 29
30. 30
31. 31
32. Within what you control, just always remember to design for hands, fingers, thumbs, and PEOPLE.
33. You can follow these links to see all that I have written about, including more on the topics I covered today.
34. You can read about my touch research, or buy a Touch Template to test out how touch-worthy your designs are.
35. And feel free to find me on social media, email me, and ask for these links, or ask questions. 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. TIME FOR QUESTIONS? I will be presenting a master class tomorrow, so l‘ll be seeing some of you there. * [STOP] *