Usable Shopping Carts
November 26, 2002
|
Creating a usable e-commerce application is a daunting challenge.
There is so much to do, from the initial concept, through to
designing and coding the application. This leaves a lot of scope
for things to go wrong. The Chapter 3 excerpt introduces you to
the concept of making wireframes of web site projects, and how
to create them. The rest of this chapter looks at creating UI
specs and prototypes.
|
From the Publisher:
Summary
Creating a usable e-commerce application is a daunting challenge. There is so much to do, from the initial concept, through to designing and coding the application. This leaves a lot of scope for things to go wrong.
What's great about this book?
In this book we take all the hassle out of online shopping applications, by showing you how to plan your application, design the user interface and datastore, and code the entire thing. But it doesn't stop there – we provide the complete code for two complete shopping cart applications, customizable for your own needs.
Subject area
In this book we cover:
Planning an e-commerce application
Designing the application, from customer surveys and wireframe models, to UI design and prototyping
Designing and implementing the databases that will hold your product and order information
Implementing the Product Catalog, Shopping Cart, and Checkout system
Who is this book for?
This book is for any web professional who wants to implement a shopping site, or add e-commerce functionality to an existing site. HTML knowledge, as well as knowledge of one of the backend combinations (ASP/SQL Server or PHP/MySQL) is essential to get the most use out of this book.
The handsome cover illustration was commissioned by glasshaus from Chris Bishop. Chris is a classically trained painter, designer, cartoonist and illustrator from the Washington DC area, and he has served as designer and illustrator for PBS Kids since 2000. Chris can be contacted at chris@chrisbishop.com, and invites you to review his illustration and design portfolio at superflygraphics, and his comic strips and fine art at chrisbishop.com.
User Interface and Interaction Design
This is an
excerpt from Chapter 3 of "Usable Shopping Carts" by glasshaus,
(ISBN: 1904151140, copyright glasshaus 2002). It introduces you to the concept
of making wireframes of web site projects, and how to create them. The rest of
this chapter looks at creating UI specs and prototypes. These three topics are
important when designing a professional web site to allow you to keep the
client and the rest of your team clear about how the design is progressing, and
to be able to communicate requested changes.
Wireframing
When
creating a usable UI for the Web, one of the most important things to do is to
make sure you have the interface planned well before you start building. The
most common and the most reliable way to plan an interface is to create what is
referred to as Wireframes.
Wireframes
are similar to blueprints – we need one to represent each of the individual
screens of the overall UI. They are usually covered in colourless squares and
have little notes all over them. As boring as they sound, they are perhaps the
most important step in ironing out the product before you set the backend or
middleware development in motion. A typical Wireframe looks something like
this:
Wireframing
can save weeks of time in development because of the number of errors that are
avoided – you can make sure everything works at this stage, and get the
client's approval, before you get to the coding stage. You can save a ton of
money because of this, and the client is kept happy because they can see how
things will look in the finished product. So, if you are serious about making a
usable product, do what you can to get some Wireframes of your product
assembled.
In order to
make a good set of Wireframes you need to start off with some of the
information you collected while determining the Information Architecture. For
instance, having another look at the Rapid Prototypes from Chapter
2 will help
quite a bit in gaining an understanding of the page elements that you might
want to use. You will also want to use the Site Map and Task Flows to get an
idea of the number of screens, dialog boxes and alerts you will need to
wireframe.
When you start to think about which screens you
will be working with it is important to consider every dialog box, alert and
error page as well. This is one of the only times that anyone ever considers
how these screens are put together, or even what content is on them, so it is
very important to include as many of these details as possible. We've all seen
many error messages that don't make any sense and plenty of dialog boxes that
are useless or poorly designed. This is your chance to get it right for a
change! Make sure you document as many as possible.
When you
have an idea of how many screens you will need to make, you should start
designing some reusable screen elements. If you don't feel up to creating your
own, or you are looking for inspiration, there are a number of software
packages available that contain a basic library of screen elements. We'll talk
more about this and the basics of creating Wireframes below, but first let's
get into the details of how we developed the Wireframes for the Shopping Cart
product, TuneIn!
Usable Shopping Carts
Wireframes in UI - Page 2
|
