Badge # 6: User Experience (Mobile Interfaces)

Upon review, the existing Panchito’s website seemed like it could potentially benefit from an update for mobile users. Generally speaking, the website could use usability updates for the computer browser as well, and perhaps by reformatting the existing website with a mobile platform in mind first, the designers and developers responsible would be able to create a more streamlined and responsive website for computer browsers as well.

My mobile interface design for the Panchito's home page

My mobile interface design for the Panchito’s home page

In mobile design, there are important core principles that apply no matter the mobile device. Firstly, the simpler the design, the better it will translate to a mobile device. If a design feels cluttered when it is being viewed on a computer, it will feel even more cluttered and overwhelming when on a mobile device. Furthermore, it will be less navigable than it could be if fewer pictures or details were included in the design. In the redesign of Panchito’s website for mobile interfaces, this was a very important consideration. After analysis of the different pages included on the website, it made sense to limit the number of navigation bar menu items there were because seven is a large amount for a mobile interface and it would be difficult to include that much detail without making the font very small or having the buttons very close together, neither of which are preferable for mobile interface design. The result was a narrowing down to four out of the seven navigation bar menu items—Menu, Contact Us, Directions, and Panchito’s Family made the cut because the first three are essential to most websites and the Panchito’s Family tab seems like it would be important to the family that started the business.

Another core principle for mobile interface design is to make sure that pages load with efficacy and speed, meaning the fewer large file sizes, the better. The three images and logo that are included on the computer desktop version of the site were narrowed down to one central image and the Panchito’s logo. It still communicates the salient details about the website—that the site is for Panchito’s and that the food served is Mexican. This will also ensure that the page loads fairly quickly. There are symbols that are associated with each of the four navigation bar menu items that made it to the mobile interface home page design, but they are small and simple and unlikely to create too much lag time.

Updated Menu page design

Updated Menu page design

 

The decision to include symbols for each of the navigation items has to do with another core principle for mobile interface design—the idea that our thumbspan can potentially limit where items should be clickable on the page. In Josh Clark’s article entitled “Designing for touch,” he identifies this principle as the Rule of Thumb. Since touch screens are becoming increasingly standard, designs have to be aware of where fingers “rest on the device.” The menu items are placed toward the bottom of the screen so that they are more naturally reachable for thumbs. Beyond that, thumbs are sort of clunky at times so it makes sense to have each item separated by a good amount and also clearly clickable. On the Menu page, clickability is prioritized as well. There is a vertical scrolling option and each of the categories of the menu is clickable, and when one of the categories is clicked, it expands and reveals the options for that particular category. On the Directions page, there is really only one item to click—whether or not to turn on location services. The user would also theoretically be able to click on the map after location services are turned on and have a window open with Google Maps directions from his or her location to Panchito’s.

Panchito's Directions update

Panchito’s Directions update

Finally, a major principle of mobile interface design is not to neglect aesthetics—even though the temptation is to make the site as streamlined and direct as possible, it still needs to be attractive for users to enjoy using it. Using theme colors and familiar logos that link the design to the actual brand are unobtrusive ways to manage the necessary but challenging balance between simplicity and attractiveness.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s