Designing For Mobile - Best Practices for Superior User Experiences Responsive design, UI, UX, rendering, information architecture… if you speak with anyone in the mobile or web space nowadays you will certainly cover the topic of user experience. That’s because the user experience is critical to success on mobile or web, and becoming increasingly important everyday as new devices proliferate the market and people on the move have less patience for poorly designed sites and apps. Regardless of your involvement on a mobile project, a great user experience should be the goal for all of us who work in mobile. That’s because good design ensures end users find what they need and repeat visit – and that just makes good business sense. So how do we fix this? Know Your PurposeThink Small But Don’t Shrink DownConsider All Shapes & SizesBe LightTouchy Feely MechanicsContext in Context 1. In broad strokes the three major benefits mobile will give your business are: Simplicity, Immediacy & Context. 2. 3. This same thinking also applies to tablets. 4. 5. 6.
Forms On Mobile Devices: Modern Solutions Why You Should Get Excited About Emotional Branding Globalization, low-cost technologies and saturated markets are making products and services interchangeable and barely distinguishable. As a result, today’s brands must go beyond face value and tap into consumers’ deepest subconscious emotions to win the marketplace. In recent decades, the economic base has shifted from production to consumption, from needs to wants, from objective to subjective. We’re moving away from the functional and technical characteristics of the industrial era, into a time when consumers are making buying decisions based on how they feel about a company and its offer. Read more... A Guide To Validating Product Ideas With Quick And Simple Experiments You probably know by now that you should speak with customers and test your idea before building a product. Mistakes include testing the wrong aspect of your business, asking the wrong questions and neglecting to define a criterion for success. Read more... Read more...
Device-Agnostic Approach To Responsive Web Design Advertisement This is a different take on Responsive Web design. This article discusses how we can better embrace what the Web is about by ignoring the big elephant in the room; that is, how we can rely on media queries and breakpoints without any concern for devices. The Challenge Let’s start our journey by looking at these online tools: Those pages let people check websites through a set of pre-built views based on various device sizes or orientations. Now check the-great-tablet-flood of 20116. Do you get my drift? I don’t want to go the "consider it to be harmful7" route, but I want to point out that tools like these, or articles promoting a device approach (i.e. To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. The Goal The goal is to surface content, to style boxes as columns so they bring sections above the fold. Content Is King! The Principle The content of a box dictates its width. Decisions are made keeping these points in mind:
A one page guide to HTML5 support in mobile browsers – Cell Phones & Mobile Device Technology News & Updates HTML5 has arrived and holds a lot of promise for the future of web browsing. It does video, it is starting to become a platform for games, and it teases us with the dream of a rich browsing experience without the need for plug-ins such as Adobe Flash and Microsoft’s Silverlight. Most mobile browser development teams have now brought their browser software in-line with the requirements of HTML5, meaning they can advertise HTML5 compatibility. However, HTML5 isn’t just one thing, and is actually a collection of over 20 important and useful features. While mobile browsers may claim HTML5 compatibility, not a single one supports all of its features yet. How do you know which browser supports what features? The mobile browsers covered include Safari on iOS, Android Browser, BlackBerry Browser, Internet Explorer, Opera, Firefox, webOS Browser, and Symbian Browser. It’s actually difficult to pick a winning browser, and it depends more on which features are important to you.
Results of Mobile Phone Handedness Survey | Jonathan Stark January 11, 2013 Back in 2010, I posted a mobile phone handedness survey and asked folks to fill it out to get a sense of how people held their phones. In Dec 2012, I added a field or two about screen size and resolution and re-publicized the existence of the survey. Caveat: I wanted to segregate the results of the two surveys but for some unknown reason Google Docs wouldn't let me. Download full summary as PDF (147 KB) Download 2010 results as CSV (24 KB) Download 2012 results as CSV (61 KB)
Separate Mobile Website Vs. Responsive Website Advertisement The US presidential race is heading into full swing, which means we’ll soon see the candidates intensely debate the country’s hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites. It just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney’s dedicated mobile website, and in the blue corner is incumbent Barack Obama’s responsive website. We’re going to see how well their mobile Web experiences stack up. Why Bother With Mobile? Why are the candidates attempting to create mobile-optimized Web experiences? What’s more is that people are arriving to the mobile Web through more diverse channels than ever before. These are just a few channels that drive people to the Web on mobile devices. (al)
How can retailers appeal to mobile users in store? The use of mobile phones for offline shopping has increased dramatically over the past few years, and even if consumers aren’t actually making a purchase with their mobiles, they are often using them to research products and prices while shopping. According to a recent Toluna / Econsultancy survey of UK consumers, 13% of respondents had made a purchase on their mobiles, and 19% had used them to compare prices and look at product reviews while out shopping. So what can retailers do to adapt to this challenge? A recent Motorola survey in the US found that customers have good reason to compare prices on their mobiles. 43% of respondents said the mobile improved their offline shopping experience, while 87% of retailers said that customers would be able to find a better deal by using their phones. Using the barcode scanner on the Amazon app, or entering a search term, customers can easily check the products they are looking at in a store on Amazon’s site. Price match promises Voucher codes
Inspired UI - Mobile UI Patterns Presentation on the Mobile Web Dave and I were invited to present on mobile at UNC's Wilson Library, sponsored by the Carolina Adobe User Group. It was a nice event (with impressive door prizes, by the way!) and included some good questions at the end. Here are my slides (also a set on Flickr) and a writeup of my portion of our presentation. (Note: Now that I read back over this post, I'm realizing that I was a bit "punchy" when I wrote it. Clarifying the Mobile Opportunity Since Dave and I teamed up to give this presentation, we agreed that I would focus on the big-picture issues of mobile technology: the background, the cultural forces driving it, and of course, the possible future. My point of view on this is probably biased by many issues, but here are a couple of requisite caveats: First and foremost, my discussion assumes a focus on adapting non-monetized content for mobile. One last introductory point I made before digging in was probably the most important one. "Obviously," you say. The Case Against Apps Yay!
Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes Advertisement In darts, hitting the bulls-eye is harder to do than hitting any other part of the dartboard. This is because the bullseye is the smallest target. This same principle can also apply to touch targets on mobile devices. Smaller touch targets are harder for users to hit than larger ones. (Image credit: ogimogi) What the Mobile Platform Guidelines Say Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall. While these guidelines give a general measurement for touch targets, they’re not consistent with each other, nor are they consistent with the actual size of the human finger. Small Touch Targets Lead to Big Problems Small touch targets make users work harder because they require more accuracy to hit. Not just that, but small touch targets can lead to touch errors. Thumb use among mobile users is popular. Pixel Width of the Average Index Finger Pixel Width of the Average Thumb Finger-Sized is Ideal, But Not Always Practical
UI Patterns For Mobile Apps: Search, Sort And Filter Advertisement As I was waiting for a table at a local restaurant the other day, I flipped through a couple of the free classified papers. I was shocked to realize how dependent I’ve grown on three simple features that just aren’t available in the analog world: search, sort and filter. AutoDirect and some of the other freebies are organized by category (like trucks, vans, SUVs) but others, like Greensheet, just list page after page of items for sale. But after taking a look at Craigslist mobile, it became obvious we could all benefit from some best practices around mobile search, sort and filter UI design. Search Patterns Before you ever try to design a search interface for any platform, buy and read these two books: Search Patterns: Design for Discovery by Peter Morville and Jeffery Callender, and Designing Search: UX Strategies for eCommerce Success by Greg Nudelman. Then take a look at these search patterns specific to mobile applications: Explicit Search Auto-Complete Dynamic Search Sort
Preparing Websites For The Unexpected Google Mobile Ads Blog Android niceties