BlogmyQuery – BMQ

Editor’s Note: Smashing Magazine is happy to present this sample chapter from Theresa Neil’s new book Mobile Design Pattern Gallery: UI Patterns for iOS, Android and More, which provides solutions to common design challenges. We’re certain you’ll find the information useful for your next mobile project.

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. This chapter explores a dozen different ways to surface and refine the data your customers want.

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 Morevill and Jeffery Callendar, 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
• Scoped Search
• Saved & Recent
• Search Form
• Search Results

Explicit Search

Explicit search relies on an explicit action to perform the search and view results. That action might be to tap a search button on the screen, like Walmart, or on the keyboard, like Target. The results are typically displayed in the area below the search bar. Consider pairing an explicit search pattern with the auto-complete pattern.

Walmart uses a search button (Go) on the screen, Target uses the Search on the keyboard.

Target loading and then displaying search results.

Offer a clear button in the field and an option to cancel the search. Use feedback to show the search is being performed.

Auto-Complete

Probably the most useful search pattern that emerged in Web 2.0 is auto-complete. Typing will immediately surface a set of possible results, just tap on one to selected it and the search will be performed. Or continue typing your own criteria and then tap the explicit search button.

Android Marketplace (Google Play) and Netflix both use auto-complete

Ideally the results will be displayed immediately, but a progress indicator (searching…) should be used for system feedback. Netflix (above) uses an indicator in the search field, whereas Fidelity (below) displays one where the results will eventually be displayed.

Fidelity shows feedback while loading the auto-complete options.

TripAdvisor provides an enhanced auto-complete, grouping the results by popular destinations, hotels, restaurants. LinkedIn does something similar by showing direct connections first, then other people in LinkedIn.

TripAdvisor and LinkedIn group the suggested options.

Provide feedback if there could be a delay in displaying the results. Consider emphasizing the matching search text in the search results.

Dynamic Search

This pattern may also be called dynamic filtering. Entering text in the search field will dynamically (onkeypress) filter the data on the screen. Note, the examples may look similar to auto-complete but there is a different interation model. The dynamic search pattern is used to refine or whittle down a existing and visible list of objects. In these examples from BlackBerry App World and WorldMate on Android, apps and hotels, respectively, were already displayed on the page.

BlackBerry App World and WorldMate offer dynamic search for refining a big list of results.

Works well for refining constrained data sets, like an address book or personal media library, but may be impractical for searching large data sets from multiple sources.

Scoped Search

Sometimes it is easier (and faster) to get to the desired result by scoping the search criteria before performing the search. Google and Photobucket use different designs to the same end.

Google uses an overlay to present scope options, whereas Photobucket uses a dialog.

AllRecipes also lets you select criteria (or filters) before submitting the search. Dropbox defaults the initial scope to All, but you can switch it to Files or Folders before or after tapping the search button.

AllRecipes pushes the limit of scoping options, Dropbox keeps it simple with just 3.

Offer reasonable scoping options based on the data set. Three to six scoping options are plenty, consider a search form for advanced searching capabilities.

Saved & Recent

Successful mobile interfaces follow a basic usability maxim: respect the users effort. Saved and recent searches do this by making it easy to select from previous searches, instead of retyping the same keywords or search criteria.

eBay lets customers explicity save searches. Both eBay and Walmart implicity save customers’ most recent searches.

Other options to respect the users’ effort involve location based searching options like Trulia, and bar code searching, like PriceCheck by Amazon.

Trulia offers location based searching, Amazon offers 4 ways to search.

Google Shopper offers scan and speak search options and a full search history grouped by search date.

Saved searches typically require additional steps to name a search for later use, whereas recent searches are implicitly saved and surfaced. Consider which one will best serve your customers’ needs.

Search Form

This pattern is characterized by a separate form for entering search criteria, and an explicit search button.

Search forms on WorldMate and airbnb.

WholeFood’s recipe search allows customers to add multiple criteria, course, category, special diets and keywords.

Minimize the number of input fields. Implement OS specific input controls properly. Follow form design best practices (alignment, labels, size).

Search Results

Once a search is performed the results can be displayed in the same screen or on a dedicate results screen. Results may be displayed in a table or list, on a map or satellite, or as thumbnail images. Multiple view options can be used depending on the type of results and user preferences.

Kayak and Foursquare (webOS) show the results in a table.

airbnb shows the results in a list and offers a map view toggle.

Zappos offers a list view and alternate carousel view for browsing search results.

Lazy loading is a common technique to use so that some results will be displayed while the rest are being loaded. Many applications offer either a button to explicitly “view more results� or will automatically load more results when the screen is flicked.

eBay Motors and Best Buy.

Label the results with the number returned. Use lazy loading instead of paging. Apply a reasonable default sort order. Avoid paging tables, they break the natural interaction model for viewing information on a mobile device.

Sort

It is important to choose a reasonable default sort for displaying search results. A little common sense plus user validation is the best way to choose the default sort order. These patterns offer options for changing the default sort:

• Onscreen Sort
• Sort Selector
• Sort Form

Onscreen Sort

When there are only a few sort options, an onscreen sort can provide a simple one tap solution. Placing the sort toggle at the top or bottom of the screen will depend on the other screen elements.

Target provides four sort options with a three toggle button. For the price sort option, they offer two choices: sort by price ascending and sort by price descending.

Expedia (older version) and Target iOS use onscreen sort.

Clearly show which option is selected or “on�. Consider the Sort Order Selector pattern if the option labels don’t fit nicely in a toggle button bar.

Sort Order Selector

The selector pattern is a good alternative to the onscreen sort. There are a number of different UI controls that can be used for selection, but consider the design guidelines for the OS you are designing for (ex. the menu is common for Android app, and the picker and actionsheet are common in iOS apps).

Walmart on Android uses the common menu control.

The option titles can be longer (more explicit) and more options can be displayed. Walmart places the sort button in proximity with the search field, wheras Kayak offers sort and filter options at the bottom of the screen.

Kayak on iOS uses the standard selector control.

OS neutral solutions include a simple combobox, like Target on Android, or an overlay menu, like Awesome Note.

Target on Android just uses a combobox. AwesomeNote uses an overlay.

Follow OS design conventions for choosing the selector control, or choose an OS neutral implementation. Clearly show which sort option is applied.

Sort Form

Some applications have consolidated the sort and filter options into one screen, typically titled “Refine�. This is the most effort intensive sort pattern requiring the user to open the form, select an option, and then apply the selection (by tapping “done� or “apply�).

Cars.com and eBay Classifieds.

Consider the more efficient sort option toggle or sort order selector patterns before choosing this design.

Filter

Large sets of data can require additional filtering, also called refining. Filtering relies on the user selecting criteria by which to refine the set of search results or a large set of objects. Common filtering patterns include:

• Onscreen Filter
• Filter Drawer
• Filter Dialog
• Filter Form

Also see the earlier search pattern, Scoped Search, for an optional pre-filtering technique.

Onscreen filter

Similar to the onscreen sort, the onscreen filter is displayed with the results or list of objects. With one tap, the filter is applied. HeyZap uses the standard toggle button bar, whereas Google uses vertical tabs.

HeyZap and Google.

CBS News and the ACL Festival app uses a scrolling filter bar as a way to let users quickly hone in on certain types of articles and bands, respectively.

CBS News (single filter bar) and Austin City Limits Music Festival (double filter bar).

Don’t use this filter pattern for primary navigation within your app, but instead use it to group and filter related content.

SXSW offers a filter button bar combined with a second row of filtering options. Feed a Fever news reader uses a super simple stylized set of comboboxes for filtering news feeds.

SXSW Conference app and Feed a Fever.

Filter options should be clearly worded and easy to understand. Show the filters that are applied or “on�.

Filter Drawer

Almost as efficient as the onscreen filter, a drawer can be used to reveal filter options. Flicking or tapping a handle will open the drawer. Audible’s drawer reveals a simple filter toggle bar, whereas Sam’s offers a host of filter options that can be applied to the map of club locations. A better design for Sam’s would be to leave the map visible and allow for dynamic filtering instead of the explicit “filter� button.

Audible and Sam’s Club.

Expedia’s new filter drawer.

Filter Dialog

Like a pop-up on in a web app, the filter dialog is modal in nature. It requires the user to select a filter option, or cancel the action. TripAdvisor on iOS has a custom filter dialog, whereas USPS Mobile on Android relies on the default selector control.

TripAdvisor and Due Today Lite.

While the Filter Dialog may get the job done, the first two patterns provide more freedom for users to experiment with and apply filters directly in context.

Keep the options list short, avoid scrolling. Consider a Filter Form for lengthier or multi-select filter options.

Filter Form

Large data sets can benefit from more advanced filter/refinement options. For example, WorldMate uses a form to filter hotels based on price, brand and stars. Zappos uses a similar approach, using the iOS standard drill down for selection, and the clear/done buttons in the title bar.

WorldMate’s filter form (looks very similar to Kayak’s design) and Zappos filter form for iOS.

Freetime uses custom controls in their filter form. First you pick the filter category, then choose the filter criteria, then apply the filter to the calendar.

Free-Time filter form.

Conditional filters, also called predicate editors or expression builders, are an advanced filtering feature typically found in reporting tools. Here’s the standard layout used on the web and desktop.

Predicate editor in the Wufoo web application.

Creating a conditional filtering a mobile application can be challenging in a mobile form factor but Roambi has accomplished it.

Roambi’s predicate editor.

Don’t over-design the filters, a simple onscreen filter or drawer will usually suffice. If a filter form is necessary, follow form design best practices.

More Resources

Learn more about designing usable and effective mobile apps in Mobile Design Pattern Gallery: UI Patterns for iOS, Android, and More:

• Navigation
• Forms
• Tables
• Tools
• Charts
• Invitations
• Feedback & Affordance
• Help

Also check out the Mobile Design Pattern Gallery website, blog and Flickr photostream with +600 screenshots.

(fi)

---

© Theresa Neil for Smashing Magazine, 2012.

Co-founder of Mule Design and raconteur Mike Monteiro wants to help you do your job better. From contracts to selling design, from working with clients to working with each other, his new book from A Book Apart, released today, is packed with knowledge you can’t afford not to know. A List Apart is pleased to present an exclusive excerpt from Chapter 2 of Design Is a Job.

There are hundreds of devices out there right now that can access the full web, as Steve Jobs once put it. They come with different capabilities and constraints, things like input style or screen size, resolution, and form. With all these devices set to overtake traditional desktop computers for web traffic next year, we need tools to help us build responsively. Jonathan Smiley shows how to dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites.

One of the useful things in HTML5 is the placeholder attribute that lets you specify a short hint for text input fields (textarea elements and the text states of the input element). In browsers that implement placeholder according to the specification, the hint text is displayed only when the field is empty and unfocused.

This is good since it gives you an opportunity to provide the user with hints regarding what they are expected to enter in the field. What is not good is that the placeholder attribute is often used as a substitute for the label element. I’ve seen this in various demos of the placeholder attribute as well as in demos for scripts that emulate the placeholder attribute in browsers that don’t natively support it. So some developers appear to misunderstand what the placeholder attribute is meant for and how it works.

Read full post

Posted in Accessibility, HTML 5, Quick Tips, Usability.

Copyright © Roger Johansson

If you’ve ever tried working with, coding for or just thinking about anything to do with events, you know they are a total nightmare in every possible way. Repeating events, schedules, multiple days, multiple tracks, multiple prices, multiple speakers, multiple organizations, multiple payment options — the list goes on on for quite some time.

Today we’ll show you how to make event management an easy — nay, enjoyable — task by making WordPress do the grunt work for you. We’ll be looking at out-of-the-box WordPress features, plugins and themes and a DIY approach to managing events. Please do let us know if you have more or better ideas.

In A Nutshell

I know some people don’t like to read lengthy reviews, so here are my recommendations in the shortest possible form. We’ll look at all of these recommendations in depth, so read on if you want to know more about them.

If money is not an issue or you just want the best possible combination of products, I recommend using Event Espresso to manage the events and Eventure from ThemeForest to display them. This will set you back at least $125 (more if you need add-ons for Event Espresso), but it will give you one of the most powerful event-management setups you can get without touching any code.

If you don’t need a payment gateway, multiple-day event-specific options or other advanced features or you’re on a budget, you could use Events Manager Free Version, Event Espresso Lite or Events Made Easy. These are all free and easy to use, providing roughly the same functionality. You might also want to purchase a theme to display your events nicely, which will set you back at least $35, but this is in no way required.

Event Management Features

Before we get to specific tools, let’s look at some of the features we get from an event-management system. You might not need all of these, but looking at them is useful when planning your system.

Events

Obviously, our event-management plugin should at least support events. The ability to create events that are separate from your regular posts is a powerful feature, allowing you to add events to your website’s existing content.

Event Taxonomies

Regular posts can be ordered into taxonomies — categories and tags. Having separate taxonomies for events (i.e. event categories and event tags) is useful for separating them from your regular content. If you organize Web development conferences, you might want to differentiate between design- and coding-related ones, or you might want to single out JavaScript- and Ruby-related ones. Your regular content might have nothing to do with Web development, so having separate taxonomies would come in handy.

Registrations

Allowing people to register for events right there on your website can greatly boost attendance. The path a user has to take from discovering your event to participating becomes that much shorter, which translates into a better user experience and more registrants.

You will also need to be able to manage registrations through the back end. Registrants should be listed somewhere, with easy access to their details.

Payment Gateways

The ability to accept payments online breaks down another barrier between your events and potential attendees. A feature that allows you to accept the widest variety of payment methods would be ideal.

Speaker Management

As a software programmer, I don’t like when I enter data somewhere and it’s not stored in an easily reusable way. The ability to manage speakers across your events is a big plus because it opens up access to powerful features later on. This feature should include the ability to add biographies and photos of speakers to the website.

Venue Management

As with speaker management, having all your locations stored properly will make them ease to reuse in future. If you need to schedule another event at the same venue, there’s no need to reenter the details; just select it from a menu, and off you go.

Participating Organizations

Another nice feature is being able to attach companies to events. Companies will often host events, and giving them some recognition for it is a nice thing to do in return.

Sponsors

Almost all major events have sponsors that contribute in some way (usually with money). They often require you to add their logo in various places. Being able to add the names, descriptions and logos of sponsors for an event would be handy.

Notification Management

There are two kinds of notifications we might want to control. On-site notifications are shown to users once they perform specific actions. When a user successfully pays for a ticket or encounters an error while registering, an on-site notification should pop up to let them know what’s going on. Being able to tailor the language of these to your style would be a nice feature.

The second type of notification are email messages to participants. Confirmations, reminders and so on would all be customized to your style.

Form Management

Controlling the information to gather from registrants is key to finding sponsors and making the lives of users easier. Being able to control this on an event-by-event basis would be best. Some events require less information from users, others more.

Coupon Management

Many events offer coupons for promotional purposes. If you want to engage users beyond your website, then giving coupons for third parties to distribute is a great tactic. Creating multiple coupons for various events would enable you to manage a full-blown coupon campaign.

Price Management

Another way to persuade visitors to register is to offer different price options, such as early-bird pricing, student discounts, last-minute offers and so on.

Multiple Day Events

Many events have so much going on that splitting them into multiple days is the only way to go. Being able to control this from the administration section would be a great plus, especially when coupled with price-management options (such as registration for one day only).

Repeating Events

If you are organizing a repeating event, you wouldn’t want to have to create it from scratch a hundred times a year. Scheduling and repeating tools would help minimize your effort.

Powerful Global and Miscellaneous Settings

A great event-management system has to have great global and miscellaneous settings. Settings for creating an events listing page, changing currencies, setting time zones and so on are all part of a complete system.

Complete Solutions

All of the WordPress plugins in this section are paid plugins, but if you’re running a serious operation, then the first two listed here are well worth the money.

The three best plugins around are Events Planner, Events Manager and Event Espresso. Event Espresso is by far the best of the lot, but all three are versatile and under constant development.

Event Espresso

Event Espresso is the cream of the crop. It has built-in support for almost all of the features mentioned above (except perhaps sponsor management) — and much more! It enables you to set up multiple forms of payment, multiple event dates and times, multiple prices, discounts, promotions (coupons), locations (even virtual ones) and emails. It also creates posts for events automatically and does so much more!

Event Espresso also has a free “Lite� version, which gives you a taste of the solution. The lite version is actually pretty robust and can be used for simple situations. It includes event and attendee management, automated emails, customizable registration and PayPal Standard Payment.

You can easily tailor the design of event listings to your current theme. If you are willing to dish out the money for this plugin, I recommend getting a premium website theme as well and modifying that as needed.

Event Espresso is not cheap, but its feature set is top notch, so the price is justified. The basic version costs $89.95, which contains all of the features that 95% of people will need. From there, you can download free and paid add-ons to the basic system. Some free add-ons are for payment gateways, social media and calendars.

MailChimp integration, recurring events management, developer customization options, WordPress integration, Groupon integration, multiple event registration and shopping cart integration (coming soon) is available at between $25 and $35 a pop. Most of these are well worth their money, although getting the WordPress members integration for free would have been nice, because that’s not a huge programming leap.

A gallery will be added here with 3-4 images of how an event is displayed by default, a screenshot from the admin, etc. The images can be found in the images/gallery/ folder of this draft

Events Planner

Events Planner is another well-rounded system. It doesn’t have all of the features of Event Espresso, but it does give you a lot to work with. Event categories, tags, instructors, locations, companies, notifications, payments, registrations and more can be managed with ease.

The main difference between Events Planner and Event Espresso is that the former’s UI is less polished, and some features found in both are not as well implemented in it. Despite this, Events Planner remains extremely flexible and robust. If you don’t want to part with almost a hundred bucks, you’ll be able to grab Events Planner for $39, plus another $24 if you need plugins that supports advanced date- and time-specific functions.

Events Planner does not have a lite version, but you can create a custom installation yourself and test drive the pro version. This is a little unusual for plugins, but it does mean you can fully test it before purchasing.

A gallery will be added here with 3-4 images of how an event is displayed by default, a screenshot from the admin, etc. The images can be found in the images/gallery/ folder of this draft

Events Manager

Events Manager is very similar to Events Planner in many ways. Some features have a better UI in Events Planner, while others are better in Events Manager. Were the price not so different, it would be a matter of preference, but because Events Manager costs a lot more than Events Planner, I would not recommend this solution.

Events Manager will set you back $75, and the price buys you only one year’s worth of upgrades. There are no plugins or add-ons here (which could be a good thing), but the higher price and losing access to updates after a year seems a bit cheeky at this price point.

Events Manager has a free version that gives you a lot of functionality. It supports event and booking management, recurring events, locations and more.

A gallery will be added here with 3-4 images of how an event is displayed by default, a screenshot from the admin, etc. The images can be found in the images/gallery/ folder of this draft

Final Verdict

Of the three, Event Espresso is the clear winner. It supports every feature the other two do and a lot more. It also has handy (albeit slightly expensive) plugins, with more to come. Even at $89, if you run a successful business (or plan to), it isn’t a high price to pay for the features you get.

If you can’t spend that much on a plugin, then Events Planner is a very capable alternative that will not leave you wanting. When all is said and done, it does cost less than half of Event Espresso and still has 80% of its features. I would still heartily recommend it.

If you don’t need payment options, however, and you need a free solution, the free version of this plugin might be your best option. Have a look at the partial solutions below.

Partial Solutions

Quite a few solutions do not offer advanced features such as payment gateways and coupon management but do allow some flexibility and customizations for events.

The best options for a simpler approach are All-in-One Event Calendar, Event Organiser and Events Made Easy, as well as the free versions of Event Espresso and Events Manager. In a showdown, it would be a close call between Event Espresso and Events Manager.

All-in-One Event Calendar creates a new post type for your events, allowing you to keep blog posts and events side by side. It supports event categories, tags and a few other options. Because it allows you to create a calendar page, it’s a great solution if you need something simple and workable in minutes.

Event Organiser has all of the same functions plus a lot more! It has permission settings, permalink settings, importing and exporting options and even venue support. In addition, it has an admin calendar view that gives you a useful overview of your events.

Events Made Easy has all of the features of All-In-One Event Calendar (except event tags), and it supports registrations and locations. If you absolutely need to support on-site registration, this would be the easiest to use. The UI is the least polished, though, so it won’t look as pretty in the administration section, but the features are solid.

Final Verdict

Despite the great features offered by these plugins, I would stick with Event Espresso Lite or the free version of Events Manager. Apart from offering more functionality, they will also ease your transition if you need the full-blown system later on.

Using WordPress Out Of The Box

If you don’t need to manage data for each event, WordPress’s core functionality will do just fine. Here are a few ideas to get you started:

• Use posts to store events.
• If you want to be able to have regular posts as well, distinguish them using categories.
• Create top-level categories for distinguishing organizations, sponsors and venues.
• Use your website’s registration functionality to manage past attendees, or use it as a master attendee list if separate registration is not required for your events.
• Create pages for important information such as payment options.
• Use PayPal buttons in event posts to let people register and pay directly through PayPal.

Many of these features are far from optimal for event-intensive websites, but if you just need something simple that you can set up in 10 minutes, give it a go.

If you do choose this option, pay close attention to consistency. If your goal is expansion, you are guaranteed to want a better system later on, and consistency will ensure that you can make the switch without a hiccup.

Comparing All Of The Options

There is a lot to learn and a lot of options if you want to get started with event management. To make your life easier, here is a table with all of the features discussed, along with the solutions that support them. Click on the image to go to the large version (it’s a bit small to look at here).

Event-Friendly Themes

While the plugins do a nice job of helping you manage events, they are not designed to make your website pretty, which is equally important. No matter which route you take, you will need to do some work to make things fit perfectly, but some premium themes out there will shorten this process.

Eventure

$35 | Large screenshot | Live preview

Diarise

$70 | Large screenshot | Live preview

Events (from Elegant Themes)

Large screenshot | Live preview

Eventure

Large screenshot | Live preview

Conclusion

Whichever solution you choose, you will have to put in a few hours of work to make your website work well and look good. I usually advise using free software whenever possible, but this happens to be one of those areas where I would go with a complete solution. Getting it right from the get-go will save you a lot of headaches in the long run.

If you can afford to spend over $100 on managing events, go for Event Espresso, coupled with one of the premium themes mentioned above.

If you want to spend as little as possible, then try Events Manager Free Version, Event Espresso Lite or Events Made Easy. If you don’t plan on expanding a lot or you need multiple price points, go with Events Made Easy because it is completely free, with no paid version, so supporting the developer by using his product would be a nice gesture.

If you do plan on expanding, go with Event Espresso Lite because the pro version will have everything you need when you’re ready to buy it and you won’t have any migration or data problems.

(al)

---

© Daniel Pataki for Smashing Magazine, 2012.