Mobile browser

Mission Critical User Experiences - Mobile Web

• Report rights infringement
• published: 22 Jul 2016
• views: 9

Mobile-web UX is about more than simply collapsing the top-level navigation into an options menu. It means giving on-the-go users priority access to what they need most. Creating a highly optimized mobile-web experience is key to success in world where the mobile-apps space is saturated. More at neuronux.com Full transcript here: http://neuronux.com/mobile-web-2/ Partial transcript: Hi, welcome back. I’m Soudy Khan, Director of User Experience at Neuron. Today I’m going to talk a little bit about designing from mobile-web. So, looking at the background and why mobile web has become so important. In short we have saturation of applications. There are just so many applications. A million plus in each app store via Google or Apple, and asking someone to download an app even though you might think it’s the greatest thing on the face of the Earth is actually a big thing (a lot to ask). People can’t just download that many apps. They typically download, depending on how much of a power user they are, about two-dozen apps and from that they use a small subset. Also if they do a search and they find you they’re not likely to download the app right away, but they will take a look at you through their browser. So, again we’re going to talk about designing for mobile-web, how your website within a browser responds or adapts on a mobile screen, on a small screen. I’m going to start by saying every project is different. You have to think about the context of your own user, but I’m going to give you a few tips that will hopefully get you thinking along the right lines. The first thing is making the site utilitarian. Boil down to the homepage the key functionality, that’s really the second point, so making a utilitarian is the first thing. The second thing is bringing things to the homepage as part of making it more functional. For example, if you have a website that is for the weather and you’ve got all these affordances and its very comprehensive. What might someone looking at your website through a mobile browser actually want to see when it’s collapsed to that small size? What things do you bring to the surface? Maybe just the weather, right where they are based on their location; maybe it’s the weather where they commonly search. You’ve sort of maintained that cookie. You know where they like to look for the weather and you just pop that right up to the surface. So, that’s another example. Thirdly, consider that hamburger menu. Today we have things like bootstrap and a lot of people just kind of design for that and they figure well the collapsing of the top-level navigation into a hamburger menu is fine. Well, it might be in certain cases. Maybe if you’re a service business and you’ve got relatively simple top-level navigation that talks about things like about us, services, pricing testimonials, and contact. But, in some cases let’s say you have just three things on your top-level navigation, do you really want to collapse them to a hidden options menu where those affordances are not shown to the user right away, probably not. Maybe you want to show all three of those things and not even go towards the hamburger (options) menu. In other cases you might have a lot of things but you want to pull two or three key things out of that options or hamburger menu and bring those to the surface. So, consider it very carefully. Don’t simply just use something that’s given to you as an affordance and consider the fact that my top level navigation has been collapsed and maybe my text will be laid out as kind of the end all be all for designing for mobile web. Minimize your amount of text, that’s another key point. Most practitioners do this already when they’re thinking about the web because we know people in general tend to scan things. But for mobile, for users looking for key pieces of information you have to take that one step further. You really have to tighten up your text when you’re designing for mobile web. Increase the size of your touch targets. If you can imagine something like Yahoo’s homepage just being shown on mobile web and before websites were optimized if you could think as far back as the year 2006 when the first iPhone came out, you really did see Yahoo’s entire homepage and you’d have to kind of move around and zoom in and find what you wanted. So keep in mind that the size of the touch targets, meaning the size of the buttons and the space between the centers of those buttons, is very important. In general you probably want to go deeper rather than wider. I don’t mean that in terms of a hidden affordance like an options menu that might be collapsed. But, I mean that in terms of if you look at your site map, in general you want to go deeper rather than wider so you’re not showing too much information at once. Rather you want to have a path if there’s a goal that’s very, very light so it might be a lighter series of more screens but the user can get through them very quickly.....