background preloader

UI Patterns For Mobile Apps: Search, Sort And Filter

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. I would actually have to read every single ad in the paper to find what I wanted. No thank you, I’ll use Craigslist on my phone instead. 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 Then take a look at these search patterns specific to mobile applications: Explicit SearchAuto-CompleteDynamic SearchScoped SearchSaved & Recent Search FormSearch Results Explicit Search Target loading and then displaying search results. Sort Related:  Product Design

“Steal Good Stuff” – iOS Design Pattern Collections Nov 24, 2011 Rule Number 1 if you’re going to “borrow” from other great people is to only steal things that are worth stealing. You know, good artists borrow, great artists steal. We are dealing more and more with people in large corporations suddenly finding themselves tasked like “hey you, design this iPad app!” The problem with that is that these people often don’t yet own an iPad that they use all the time. Fortunately for us several people have started collecting examples of great UI designs for us to peruse. If you want to ever have a change of being featured by Apple you will have to invest all the resources you can muster in great UX and UI design. For every such design award winner there are many more apps that are also very well designed and can serve as shining examples. iPhone Designs pttrns — designs tagged by category, e.g. iPad only Landing Pad — “A showcase of beautiful iPad app design” iPhone and iPad mixed Blog-Style Like this: Like Loading... Categories: Design

Ultimate guide to table UI patterns Check out this excellent article by Janko: Ultimate guide to table UI patterns. It is full of great examples and suggestions. After reading it, I just had to add three more scenarios: 1. Quicken Online allows simple editing with a pull down for more advanced editing. Mint.com does the same. The Ajax framework Ext JS and Ext for GWT offers a pre-built Grid row editor component. For heavy data entry, use a design like Harvest. Google Docs is an online spreadsheet application with inline editing. Implement tab navigation when you create a table with inline editing.Consider how to handle errors, such as highlighting rows or cells with errors in a way that is easy for a person to correct the issues. Swivel is an app that acts a lot like Excel and provides cell specific error messages. 2. I received an email last week asking me about super wide tables. Based on a lot of design work Bill Scott and I did for the airline industry, I would instead propose instead applying these principles: 3.

32 Examples of Usable Mobile Website Layouts The mobile web is clearly changing the way we think about layout design. Even back just 5 or 10 years ago there were barely any developers working on a solution for mobile. Now it seems everybody is doing their Internet surfing on some type of smartphone device. This process can be difficult without a bit of inspiration. United Pixelworkers Oliver Russell Charmin Cerahati Bodhum Love & Luxe Culinary Institute of America Orange Breaking News North Carolina Wine Atommica Orbital Devs South Dakota Sioux Falls The Land of Nod Bluegg Digital Agency Solid Shops Beth Israel Medical Center J Taylor Design Retail-Me-Not Heathlife Poet Freak The Backlog The Intro Workshops One Little Dream Tim Hortons Lifetime Pears WordPress Theme Orestis Web Development Team Treehouse Mobilism Conf 2012 Webshocker Humana

Keynote for iPhone 3GS, iPhone 4, iPhone 4S, iPhone 5, iPod touch (3rd generation), iPod touch (4th generation), iPod touch (5th generation) and iPad on the iTunes App Store Inspired UI - Mobile UI Patterns lovely ui What’s the difference between iOS and Android users? What does your choice of smartphone platform say about you? Do you crave the security and polished user experience Apple offers iPhone users, or do you dig the variety of devices you’ll find on the Android landscape, as well as the freedom to run software from whomever you choose? All these differences between the platforms end up attracting different kinds of users, and today we look at one survey that attempts to reveal some of the traits that are more likely to apply to iOS users than Android fans, and the other way around. According to this study by Battery Ventures, iPhone users seem to have more white collar jobs, travel by air, and enjoy wine. Android users, on the other hand, are more likely to be blue collar, rely on public transportation, and prefer beer. But for those differences, the groups still share some commonality. Notably, when this user data is filtered to only compare iOS and Android users of similar income levels, many of these differences start to go away.

Mobile Patterns and Why Use Them in Design Mobile Patterns or Mobile Templates are, as the name obviously states, templates to use for easing our work when designing a site for portable devices. As mobile web design means more and more nowadays, designers often have problems reaching deadlines because of a high workload. In web design we have grid systems we build on in order to help us maintain a clean visual pattern, but also to help us build a web page faster. Many of us even buy WordPress themes and customize them to our use. And it is worth mentioning that 10 years ago HTML templates were widely used in the industry. The truth is that designers always looked to ease their work and move on to the next project, therefore mobile patterns are something the experts start to look into more and more. Mobile patterns are structured, organized and well researched before going online. Mobile Environment It is very important not to forget you design for mobile devices and not for the web. How To Use Patterns Know some history Similarities

SketchyPad 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. The results are available below in a couple different formats. 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)

Related: