Design for Mobile : Sketches (part 2) - Overview and Detail, Finding Sightings by Celebrity, Adding a Sighting

10/12/2012 2:13:05 AM

2.4.2. Overview and Detail

So, if we’re happy with our list structure, we can move on to creating what a detailed view for a given location will look like. This is an example of the master/detail pattern we touched on earlier. From the index of locations, our users have selected an area of interest. Once they click on that location, we can narrow the focus and show them information from that one spot. Let’s take a stab at that—Figure 7 shows what we’ve come up with.

Figure 7. A wireframe for the detailed view of a spot

All the vital bits of information about a spot are present: the name, address, and a breakdown of the recent celebrity sightings that have occurred there. If there’s a photograph associated with a sighting, we can include it as a thumbnail (and perhaps link to a larger version). There’s plenty more we could include here—for example, a breakdown of the most-sighted celebs at this particular spot, or a perhaps a photo gallery of each sighting—but we’re trying to keep it simple, right? The set of information we’re showing here will let our users know who’s been spotted recently—the most important piece of information we can provide them with.

3. Finding Sightings by Celebrity

We’ve now worked out the location-centric path through our application, but what if our users are only interested in a particular celebrity? Charlie Sheen showing up at their local bar every evening is irrelevant if they’re only interested in what Brad Pitt is up to. Again, a master/detail view is the pattern we are going to use here, as it makes sense in this situation. An index of names ordered alphabetically is a familiar and easy-to-grasp interface for most users (mobile or otherwise). Figure 8 shows our wireframe for this screen.

Figure 8. Wireframing the Stars listing

There we are: a dead-easy way for our users to find their celebrity of choice. It’s worth noting that such a basic interface is potentially problematic; if our app becomes very popular and there are suddenly 1,000 stars in our database, a list like this becomes unwieldy.

It’d be fine if we were only interested in the Brad Pitts of the world, but if our taste changes to, say, Zach Braff, that’s a whole lot of scrolling to do. The Android contacts application addresses this issue by including an additional scroll tab, allowing users to jump around the whole list (with lesser accuracy). iOS has an extra alphabetical scroll area that can be used to skip to the start of a single letter grouping. Both those platforms also let you narrow the list by searching within it. For our application, we’re going to start simple, and deal with that problem if and when it becomes an issue for our users.

That’s our master view. Now on to the detail for a single star, which you can see in Figure 9.

Figure 9. Viewing a single Star

The detail view for a star is basically the same as for a location, except the roles are reversed. Again, we have all the bits we need: the name of the star we selected, and a list of recent sightings with their locations. You can think of these pages as an index for sightings filtered by the context through which we arrived: one way is through spots, the other through celebrities.

4. Adding a Sighting

Now that we’ve catered for user movement through our application, we need a way for users to contribute to our content. The success of our application is going to depend on the amount of information we can provide people with. Imagine a café review application that has no cafés—what’s the point of a celebrity-sighting service if no one can track their sightings?

Encouraging users to fill out forms online is difficult at the best of times, but it’s exacerbated on mobile. The longer it takes for users to fill in a form on their mobile device, the higher the possibility that failures or errors will happen—say, losing network connectivity. Designing for efficiency is paramount.

We have to make sure we’re including everything necessary to flesh out a sighting. A sighting is the combination of a star at a spot on a given date. Those three facts are all we really need.

Figure 10 shows a basic mockup for this form. It strikes a good balance by collecting all the information we need, while still being simple enough to not scare users away from using it.

Figure 10. Adding a Sighting

Most View
Canon EOS 6D - Affordable Full-Frame DSLR (Part 9)
Pioneer DDJ-WeGO - Entry-lever DJ Controller
Windows Vista : Installing and Running Applications - Practicing Safe Setups
PSB M4U 2 Headphones
OS X Mountain Lion - Bringing iOS features “back to the Mac” (Part 4)
MSI GX60 Review - Radeon HD 7970M In A $1,200 Gaming Notebook (Part 4)
Kindle Fire - The Second Coming (Part 1)
Razer Edge Pro - A Tablet That Could Play The Role Of A Gaming PC (Part 5)
Windows 7: Useful But Ignored
Programming Windows Services with Microsoft Visual Basic 2008 : Writing a New Thread Method, Monitoring with Multiple Threads
Top 10
Mitsubishi Hybrids – One Direction
Race To The Clouds – Honda R&D’S ’91 NSX (Part 2)
Race To The Clouds – Honda R&D’S ’91 NSX (Part 1)
Volkswagen Plug-In Hybrid Up – Double Act
Pre/Power Amplifier Marantz SA8005/PM8005 Review (Part 2)
Pre/Power Amplifier Marantz SA8005/PM8005 Review (Part 1)
Smart TV Finlux 50FME242B-T Review (Part 2)
Smart TV Finlux 50FME242B-T Review (Part 1)
The Best Money Can Buy: Motherboards (Part 2) - Asus Rampage IV Black Edition, Asus Crosshair V Formula-Z
The Best Money Can Buy: Motherboards (Part 1) - ASRock X79 Extreme 11, Asus Intel Z97 ROG Bundle, Gigabyte Z97X-GAMING G1