Using Mobile Experiences to Guide Desktop IA

Joey Fung  

March 24, 2011

Related Topics

The more mobile devices in the hands of consumers, the more important it is to have websites optimized for the mobile web. When the website’s use cases do not differ between a desktop visitor and a mobile visitor, the mobile version is often thought of as an additional nice-to-have, and is typically scoped to be a parsed-down version of the main website redesign.

On a recent project of ours, we worked on the site architecture for a mobile version of a site we were redesigning. This website was travel-related, so the priorities of the user would be different when accessing the site from a mobile device while traveling compared to accessing it on a computer at home. Outside of those use cases, however, the rest of the site’s organization remained the same.

As we broke apart the site so it would work well on a small touch screen, all the decisions that established content hierarchies and calls to action for each page really showcased their importance. Logical groups became menu items, page modules became pages, and calls to action really showcased the intent of each page. Without the proper hierarchy and content organization, the mobile version would have fallen apart.

While this client was very receptive to wireframes, this isn’t often the case. Low-fidelity wireframes or thumbnails are necessary to make those early decisions before getting into the detailed interactions. We posit that if mobile wireframes will need to be made anyway, why not use them in lieu of low-fi wireframes and thumbnails? Instead of forcing a large, possibly complex website into a simplified mobile site, start with a mobile site and expand if necessary.

When to start from mobile wireframes:

1. Some audiences do not understand low-fi wireframes or thumbnails; they have trouble seeing the forest for the trees. The prominence of mobile devices, however, means they have experience with the small screens, the need for large targets, and the distractions which occur during the circumstances of use. Presenting mobile wireframes instead of thumbnails makes it easier for the audience to understand the need to group and order the main elements, and that the details will be surfaced at a lower level. If your audience is the type to think hand sketches are unprofessional, this is another place mobile wireframes can be used.

2. It forces succinctness and simplicity. While everyone wants a simple and concise website, it’s difficult to do so, especially with all the screen real estate available. With the knowledge that it will be displayed on a mobile phone, the audience really understands that site visitors will read less and want information faster. Designing for mobile means stakeholders must answer the content questions earlier, and let go of any unnecessary details.

3. It’s simple to make something more complex; it’s complex to make something more simple. Once the architecture for the mobile site is complete, it’s really easy to add the content and details that were excluded. The best part, however, is that it may not even be necessary. Had the main website been done first, there would now need to be a long process to determine what content needs to be stripped down, how can the writing be made more concise, and what elements are distracting from the main tasks and need to be removed. Since that’s all been done for the mobile site, there’s a now a concise, simple main site ready to go. People don’t want to read lots of text, so why add it back in?

When not to start from mobile wireframes:

1. The audience will be confused why they’re staring at mobile wireframes and not website wireframes, without an explanation that the mobile site is a tool for organization, simplicity, and succinctness. On the other hand, if it’s an audience that doesn’t understand wireframes anyway, this is just a different problem of a similar nature.

2. When the mobile and web experiences are meant to be different. This doesn’t mean mobile must follow web; they should be designed in parallel for fluid transitions from one experience to the other. Examples of these cases would be social and location driven sites, like Facebook or Yelp.

So if the project involves similar desktop and mobile experiences, start with mobile, especially if there is less time than usual. The important decisions can be made earlier and the desktop experience will be less bloated. Even if a mobile version isn’t planned, try using mobile wireframes in place of thumbnails. Mobile web access is expected to surpass desktop web access in the next few years, so the client will have those documents to reference when they change their mind, and you’ll have an opportunity for repeat business.