Interaction Design for Mobile Web Sites
•Télécharger en tant que PPTX, PDF•
0 j'aime•550 vues
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (20)
Interaction Design for Mobile Web Sites
- 1. Interaction Design for Mobile Web SitesOctober, 2011
- 2. Lokion is a proven, nimble team of experts crafting digital solutions that work for real people. #lokion
- 5. ???
- 6. Focus First Define the vision. Do your homework. Test. Refine. Retest.
- 8. WHICH devices are they using?
- 9. WHERE and WHEN do they use it?
- 10. WHAT do THEY need / want / expect?
- 11. WHAT do WE need / want / expect?
- 12. HOW will this improve their experience?
- 14. Do Your Homework: Mobile Empathy
- 15. “But what I really want is…” Give users what they actually want, not what they say they want.
- 16. Do Your Homework: Audience Research Joe Sarah Helen Jake Young Cocky Pilot Friendly Flight Attendant PT Ground Service Agent Pragmatic Mechanic Evo Android HTC Inspire she calls iPhone Costco Samsung T939 iPhone with Otterbox
- 17. “A lot of times, people don't know what they want until you show it to them."~Steve Jobs, BusinessWeek, May 25 1998
- 19. Mobile Design Quick Tips Design for distraction. Avoid featuritus. Leverage hot zones. Know fat finger math.
- 22. Hot Zones
- 23. Fat Finger Math ¼ inch
- 26. Responsive Design Single set of front end code for all devices.
- 27. What We Need Flexible grid. Flexible images and media Media queries to scale it all
- 28. What is responsive design?
- 29. What is responsive design?
- 30. How did we get here? CSS 3 Percentages and EMs Min-width and Max-width Simple Math
- 31. Works great in modern smart phones http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
- 32. But what about everyone else? http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
- 33. Top Down vs. Bottom Up Approach
- 34. Top Down
- 35. Bottom Up
- 36. Bottom Up @media (max-‐device-‐width:480px)
- 37. Bottom Up @media (max-‐device-‐width:780px)
- 38. Bottom Up @media (max-‐device-‐width:1280px)
- 39. Bottom Up 480px 1280px +
- 40. Scale your images on mobile devices.
- 41. Handling responsive images Images should be flexible. img, object { max-width: 100%; }
- 42. Don’t be a jerk to your mobile audience 2. Images should adjust according to bandwidth assumptions. Resizing backgrounds with TimThumb timthumb.php?src=cat.jpg&h=200&w=120 Basic example with minimum parameters. Uses a different width and height to show that everything else works the same as with normal image resizing New cat .jpg 200px x 120px
- 46. Handling Images 2. Images should adjust according to bandwidth assumptions. Many other resizing libraries: Tim Thumb http://code.google.com/p/timthumb/ Zebra Image http://stefangabos.ro/php-libraries/zebra-image/ Imagine http://imagine.readthedocs.org/en/latest/index.html
- 53. Know fat finger math.
- 55. Flexible grid
- 56. Flexible images and media
- 57. CSS 3
- 58. Percentages and Simple Math
- 60. Designing for Mobiles: Users & Context from Niek Dekker on Vimeo.
- 61. Mobile First by http://www.lukew.com
- 62. Yiibu’sproof of concept site based on Mobile First
- 63. iPhone Human Interface Guidelines
- 64. Windows Phone UI Design and Interaction Guide (PDF)
- 65. Ubuntu Designing for Finger Uis
- 66. DeviceAtlas
- 67. Opera’s State of the Mobile Web
- 68. Google keyword tool in AdWordsGive us a shout! www.lokion.com 901.591.1614
Notes de l'éditeur
- The last couple of years have produced an explosion of mobile devices that can access the Web which has really rearranged our priorities as interactive designers.60%+ of the world’s population can surf the web on their phone2000% growth rate in mobile sites in the last year, WAY faster than desktop Internet growth(source: dotMobi)Everybody’s doing it. Folks come to us almost daily asking us to make them an iPhone app. “There’s an app for that” and we want one too!OR they ask us to make their web site “go mobile.” So, we ask which devices they want to target and they say, “Well, ALL of them, of course!” By the end of this year, Netflix.com will work well on 300 different devices. Do we really need 300+ different designs? How on earth do we do THAT efficiently?... It’s overwhelming to think about sometimes.
- Some days… it seems like it might be awfully nice to just go back to this kind of phone.
- So, we have started to ask a lot more questions when we start to design for mobile. What we want to do is begin with the end in mind so we can design efficiently rather than just throwing things out there. There are plenty of useless apps and crappy mobile sites. We want to design beautiful, smart, useful, effortless mobile sites that work for real people. So, where do we start?I’m going to cover some of the ways we try to get our mobile designs off to a good start from the beginning as well as some general tips for mobile design, then turn it over to my co-presenter to get into the nuts and bolts of the responsive design approach that is one way that is emerging to efficiently design for the growing spectrum of devices and screens on which your site might be used.
- We highly recommend that any design begin with the end in mind.To do that, you might have to do a bit of research on the front end.And it’s always good to reality check with real people through testing.
- One way to start to get a fell for the context of usage for your mobile site is to sketch personas or user stories that represent your potential audiences and then literally “tryon” their various mobile situations or challenges in role playing (ex: single-handed usage, poor eyesight, Lee Press-on Nails, etc.).
- Keyword research (like you would do for SEO) is another way to inform the priorities for your mobile site. It gets you one step closer to what real people are doing with their mobile devices.A quick glance at your existing desktop website analytics will tell you the percentage of mobile visitors, along with the types of devices and operating systems they use to access your full desktop site. Then dig a bit deeper to understand WHY these users visit your site using a mobile device — what they are trying to do, and the content and functionality they are using. What’s their STORY? Where are they? What else is going on? Are they stuck on the highway or standing in line at the movies?For example, let’s say you sell car insurance, and you want to see how users are interacting with that type of content on mobile devices versus desktop devices. You could look at your site logs and see what mobile users are already trying to do. Or you could use the search filter in Google keyword tool in AdWords to take a look at what folks on various mobile devices are more broadly searching for related to insurance. Seeing phrases like “tow,” “tow truck,” “tow service” and “roadside assistance” might lead you to put these at the top of your mobile site nav instead of “find an agent” or “get a rate quote.”A bit of investigating on the front end can really save a lot of wasted time designing stuff people don’t even want when they use your site mobilely. Of course, whenever possible, it’s great to actually get out and observe what your potential audiences are doing mobilely first-hand!
- In support of a regional airline’s intranet redesign, Lokion spent several days “out on the tarmac” observing and interviewing employees in various roles. We explored work-related technology usage, preferences and behaviors – uncovering a much higher than expected likelihood to do work-related computing on mobile devices. We learned that for MOST their mobile devices are their primary or ONLY Web access, which is a problem if your web site or crucial chunks of it don’t work mobilely. We especially enjoyed meeting the flight attendant who kept referring to her “iPhone” & “iPad” which when shown turned out to be Androids (like Kleenux for tissues), seeing the dusty old untouched desktops in the corners of the ground service break room and mechanical hangar and watching a mechanical engineer who claimed not to be a “computer person” use his iPhone to take a picture of a plane’s cracked windshield to email to his boss.
- As we get to know the real people we’re designing for and understand the multi-device channel-hopping that is a part of pretty much all of our lives at this point, it becomes essential that we test our designs through the relevant devices. This is where the rubber hits the road, right? Can real people use it… when and how it’s convenient for them.This is the sled we designed to use when we conduct usability testing on mobile devices and an example of what the output looks like when you record a mobile usability test session. We run our session recordings through Morea Analyzer to get a collective picture of success / failure ratios, ease of use scores, time-on-task, etc….. Comparing these metrics across devices or with the standard Web version provides a more holistic picture of potential usage so we can make smarter decisions about how to refine our designs.
- Design for DistractionHow many of you use the web on your phone while walking down the street? How ‘bout while driving?We’re splitting our attention, trying to look up information & absorb it quickly while also glancing about trying to make sure we don’t bump into a lamp post or crash the car. Designing for context, distraction and multitasking makes focusing your mobile UI on critical immediate tasks imperative. And you’ve also got to take into account the physical environment and conditions of usage, including motion, lighting conditions and poor connectivity combined with users’ bodily physical attributes and challenges such as less-than-perfect eyesight, imperfect manual dexterity, big fingers, Lee Press-on Nails, etc.
- Avoid FeaturitusThis is the World's Largest Swiss Army Knife / "King of All Gadgets“It is Guinness World Record holder for "the most multifunctional penknife"85 tools / 100+ uses / almost 3lbs / 8.75-inchesYou can get one at ThinkGeek (http://www.thinkgeek.com/gadgets/tools/8b97/), but who wants to carry THAT around in your pocket?! It’s good to be prepared for anything, but DANG!!!It’s a metaphor for what happens to a lot of sites over time as new features get tacked on. But designing for mobile requires that we step back from that featuritus inertia. It’s a much less forgiving platform.For years, we have been increasing the minimum screen resolution we design for, but a couple of year ago we had to reverse that and figure out how to design for all these teeny-tiny mobile screens which are like 80% smaller. How do you handle that? We simply can’t squeeze everything into that tiny space. We try to see this challenge as an opportunity to be more focused on the right tool for the right device at the right moment. Think of it as designing for a spectrum of screens – all the way from dumb phones to desktops. Start with critical mobile content & functionality on the smallest screen & scale upwards adding bells and whistles as appropriate for those luxurious stationary big screens. Ask yourself:Is this critical information or functionality users need right now?What content (if any) would be interesting to users of a mobile site that wouldn’t necessarily appeal to a stationary user on a desktop or laptop?Simplifying Navigation:Minimize the “chrome” (navigation and controls) to decrease their weight in the UI, even tuck or fade them out of the way when not in use so mobile users can focus on the content or feature that’s most important at that momentA common approach for start pages is a vertical list of links to main features and content, prioritized based on user needsReduce categories and levels, rearrange based on priority, present most important categories firstUse even shorter labels ‘cause people read even less mobilelyoffer a link to the full site so users can switch over to the desktop site if the mobile site doesn’t have that one thing they need at that momentQuick wins for mobile forms:Remove form fields, especially required fields (ex: one study showed that cutting 11 fields to 4 fields produced a 160% increase in submissions)Use top-aligned labels which don’t get lost when the mobile OS automatically zooms in on an active field Use single-column layouts to avoid mobile scrolling hellSimplifying complex interactions is hard! You won’t always get it right the first time.Sketch it out!... Test it with real people…. Go back to the drawing board if you have to.
- Leverage Hot ZonesRemember you are designing for a PHYSICAL OBJECT.How do you hold your mobile device? (everybody pick yours up)Maybe you hold it in one hand & tap with the other. Or maybe you are more of a one-handed thumb-touch person. Or maybe you cradle it in two hands and tap with your thumbs (especially when you’re on your tablet). Or maybe you do all of the abovedepending on the situation & what else you’re trying to do at the same time…. Oh, and don’t forget about orientation!However you hold and use your mobile device, there are areas of the screen that are easier to reach than others. And these target spots or “hot zones” are different than they are on a laptop or desktop.On an iPhone, the general pattern is to put content at the top and controls at bottom. You want to put the most frequently used information near the top, where it is most visible and easy to reach. Androids, on the other hand, have native controls at the bottom so you don’t want to be double-stacking…. So, if you’re designing for BOTH, you will need to compromise.Tablets are used differently. Your more likely to be seated or lying down on the couch or in bed, maybe even resting the device on your belly (and some bellies might compete for room with controls at the bottom). You’re probably not going to be holding it from the bottom. Maybe you hold it from the top third, with two hands. So, you’ll want to avoid controls at top center ‘cause using them means your hands cover content area below. Top left and right corners are preferable in portrait. In landscape, perhaps place controls on the side near the top.
- Fat Finger MathAnother challenge in mobile design is that people interact with touch-based user interfaces with their fingers and fingers come in different shapes and sizes. In fact, most users prefer to use the pad of their finger – which is slightly narrower -- rather than the very tip. So you’ve got to design your user interface controls big enough to avoid frustrating users. Apple’s tried-and-true optimal target size is¼ inchMicrosoft suggests a touch target size of 9mm with 2mm spacing between elements with visual size of UI controls 60-100% of touch target sizeNokia suggests that touchable interface elements should be no smaller than 1 cm × 1 cm with minimum target size = 7 mm x 7 mm with 1 mm gaps for fingers or 8 mm x 8 mm with 2 mm gaps for thumbs plus a 5 mm line spacing for lists such as navigation menus
- Responsive sites use a single set of CSS and HTML to accommodate the viewport size of any device.
- The basics of what we need to setup for a responsive site.Flexible grid.Flexible images and media Media queries to scale it all
- This is a Quick site I made for a a fundraiser for my wife. The goal was to setup a site that would be mostly access on a mobile device in an hour or so.
- Not only does layout change but UI elements can be hidden and shown to adapt for a device as well.
- Advanced web browsers on smart phones and mobile devices allow us to serve code that simpler and smarter. Percentage based measurements give us flexibility. We can now scale content and media based on the browser size. Min and max width properties allow block level elements to fill their parent elements no matter the size.A little simple math gives us allot of options on how the site can render at any size.
- Works very well on expensive phones. The user gets what the user pays for.
- But its not fair to all users. (or mostly mobile opera users). Some mobile browsers still have some catching up to do.
- What is the best practice currently for planning a responsive site?
- The top down approach Starts with a fill desktop browser and then takes elements away for the smaller devices.
- The bottom up approach is the exact opposite. It plans for the most basic devices at the smallest size and adds content, media, and layout for the larger devices.This method allows the worst case browsers to get the simplest version of the site.
- A browser with a width of 480 pixels and less will display the content in a single column that fills the entire screen. Giving the content the space it needs to be viewed at a small size.
- A device with a width of 780px will display multiple columns.
- The largest query will display the maximum about of columns allowing for the most layout options and the most content.
- The website appears to morph for any situation.
- Allot of media will need to be flexible as well. We can instantly achieve this with a few lines of code.
- But feeding full size images to mobile devices is not nice! So lets scale them dynamically.
- Begin Matt
- Any questions?