@@ -1,4 +1,4 @@ -<h1>Mobile App Design: Getting to the point Part 2: Building a small eCommerce site.</h1> +<h1>Mobile App Design: Getting to the point Part 2: Building a small eCommerce site</h1> <p>Following on from my earlier article, I want to put into practice the principles that I isolated by looking at GMail, Twitter and Facebook. I’ll apply the principles to one of the most common of web applications: the online store. I want to look at three typical online store pages and then go through some ideas about how best to apply mobile-design principles to the pages.</p> @@ -19,9 +19,9 @@ <p><img src="browse.jpg" alt="" /></p> <p>First up is an eCommerce browsing page. The browse page is probably one of the first pages that a visitor to an online store will hit. It’s probably one of the links off the home page, and it will contain a sub-section of editorial content relevent to a theme or category. Just as with desktop sites, it's common and important to include strong branding on a mobile site. It shouldn't take up too much space, but a simple logo at the top of the page works great.</p> - <p>The browse page serves a variety of functions in an eCommerce context. For the navigation, it's important to provide a sense of location, so simple breadcrumbs telling the customer where they are come next. Search comes next and then some listings, some with images, some as links to other sections.</p> + <p>The browse page serves a variety of functions in an eCommerce context. For the navigation, it's important to provide a sense of location, so simple breadcrumbs telling the customer where they are come next. Search comes after that and then some listings, some with images, some as links to other sections.</p> - <p>Notice how the main navigation on the site is all the way at the bottom. It's important to display the most important things first on a mobile site, and extra navigation elements should be left to the bottom. Finally, an option to view the full version of the site is always useful as not everyone will necessarily want the mobile version, or there may be features on the full site that don't translate well to mobile.</p> + <p>Notice how the main navigation on the site is all the way at the bottom. It's important to display the most important things first on a mobile site, and extra navigation elements should be left to the end. Finally, an option to view the full version of the site is always useful as not everyone will necessarily want the mobile version, or there may be features on the full site that don't translate well to mobile.</p> <p><img src="search.jpg" alt="" /></p> <p>Next I've sketched out a sample search results page. Search is probably the most often-used feature of an online store. This page should be useful and efficient at moving the customer along to where they want to go. Some information at the top of the page to show the customer where they are is all that's necessary before displaying the results of their search. Any pagination is greatly simplified, and extra nav is still down the bottom.</p> article/mobile-app-design-article-part-2.html d2c13f51d9d1f9324da28d32508969a9c8b23bd3 Eoghan McCabe eoghanmccabe@eoghan-mccabes-computer-3.local http://github.com/paulca/design-article-site/commit/687974ec79741dcbda78dd556b0cea45b234cfc5 687974ec79741dcbda78dd556b0cea45b234cfc5

2008-10-02T02:57:20-07:00

some inty tweaks bc129e8722936fb0240dfe8f6e2a43799a59a5f2 Eoghan McCabe eoghanmccabe@eoghan-mccabes-computer-3.local