initial analysis
Target is the fifth largest retailer by sales revenue in the US. As such, its website generates a lot of traffic focused around buying products. It's clear from just looking at the website that they're big on advertising special deals, hot items and product searching. There is a lot going on and our goal is to figure out what's most important for the iPhone version.
» What Does It Do?
- Tells users about sales, special events and hot items
- Lets users browse for products by category, age or arbitrary
- Displays store information, store locators and other company info
» What Are The "Cool" Features?
- Nothing is spectacularly interesting
» What's an "iPhone interface" ?
The interesting thing about web applications for the iPhone is that their focus, user-interface-wise, is completely different than on a normal browser. Most notably, web applications are to be presented as a series of menus, which means navigation is key. While the iPhone Safari allows for zooming in and out of normal webpages, users will quickly learn that this is not the optimal situation. Therefore, the focus in the interface is on creating small amounts of content per space, several spaces and large buttons to get around.
With this in mind, sites must now decide what their main features are and promote them in the iPhone design. What are people going to the site for? How fast can you get the users to their desired destination? Most iPhone versions disregard a large percentage of the content you would see in a normal browser. Instead, the iPhone applications are much more directed and certainly less cluttered.
building the basics
Because Target is a retailer, users are primarily interested in finding items to purchase. Right away it should be obvious that an iPhone version should present the user with a list of items (taken directly from the site's navigation). Then through a series of menus, the user will eventually find the product he/she is looking for, along with information about the product (See Figure 2.1).
Remember, we want our site to be broken down into a series of small menus or spaces, so we need to consider what these spaces are and how best to design them.
|
homepage
|
Chances are, users looking at Target.com on an iPhone are searching for something specific. You're on the go and you're trying to find something - you're not there to browse. So the interface should get to the point as fast as possible. That means SEARCH is the most important feature. From the homepage, the user should be able to search for a particular product first and foremost. If not, then there should be a list of categories to choose from.
But if we include tabs, we allow for extended functionality. Perhaps the user wants to take a quick look at the "hot" products" or perhaps look up something in the company info (i.e. store hours, store locations, etc.). We don't want to overdo it, but having (a) search, (b) tabs for alternate content and (c) a list of product categories allows for multiple interactions. In this way, we can cover all the bases.
|
|
alternate homepage
|
Another option for the homepage is to enclose all the categories in a select box. This saves room and allows for other content on the homepage such as a Javascript horizontal scroller list of hot items. Tapping the arrows will slide the images left and right. This allows for quick browsing if something catches your eye. Below the select box browsing, there can now be large links to pages like My Account (See Figure 2.2).
|
|
results page
|
Once you've searched for an item or clicked through a series of categories, you now have a list of resulting products. How best to display? Pictures can be too small. Text may not be descriptive enough. But the two together can provide enough context to adequately tell if you've found what you're looking for. Each list item should include a close-up product picture, the product title, the price and a link to view the details. The cleaner the better; no need for the eye to get distracted by anything other than the basic product information (See Figure 2.3).
Only a certain amount of search results should load initially, like the iPhone Mail application. Scrolling to the bottom should display a list item that says "showProj More Results"
Note: now that we've navigated away from the homepage, we don't have our search box anymore. Instead, we maintain a "Search" button at the top of every space which, when clicked, will make a search bar pop up. Clicking the Back button can take you to the previous page.
|
|
product page
|
The product page will have a larger image, larger title and price and a description of the product (See Figure 2.4). Now, we have a few options from here:
- ADD TO CART button - add the product to your virtual cart
- FIND NEAREST STORE button - if you're on the go, let the user know where the nearest store is and how long it's open for
If the application is cookie-based, then the user can automatically be logged into his/her account when visiting the website. In this fashion, instead of a purchase button, we can have an "Add To Cart" button which will add it to the user's account cart. The next time he/she logs in from a home computer, the item will be in the cart and ready to purchase. Shop on the go, but purchase in the safety and comfort of your home.
Product pages can also display relevant information such as customer reviews (See Figure 2.5) as well as items that other customers bought along with this one, for example.
|
|
footer
|
Just like every page has the same top bar that allows you to go back and search, the bottom of every page should also maintain the same functionality (a footer). This can include links to your account, shopping cart, home and a help section (See Figure 2.6). It's important that the user can move to several spaces from any given space.
|
final redesign
Designing an interface for the iPhone is all about menus and simplicity. Users don't mind tapping more than a few times to go from place to place. Each space should be very readable and easy to use, including large text and large buttons. There should be no need to struggle to view anything or tap a link. Pages can scroll, but there should be a height limit, hence limiting search results to a certain amount at a time.
key points from this discussion
|
searchability
|
When you're on the go, you want to find things fast. Allow for searching from anywhere on the site, especially if it's product/retail-based.
|
|
navigation
|
Web applications on the iPhone are better suited for a series of menus. Don't put too much content in one space. Have several spaces and buttons. The user won't mind tapping, as long as the amount of tapping doesn't get to be too much! Always have links back to neutral/important spots from any space.
|
|
focus
|
Don't overcomplicate. Understand what the user will be looking for and allow quick and easy access. There can be many things on one page, but ensure that they are spaced appropriately so everything is readable.
|
