Conceptual User Interface: A New Tool for Designing E-Commerce User Interfaces
Lawrence J. Najjar, Ph.D.*, lnajjar@viant.com
iXL
* Now with Viant. You can e-mail Lawrence at lawrence_najjar@yahoo.com.
Abstract
Customers wanted us to design their highly interactive e-commerce Web sites very quickly. But the Web user interface design tools we were using were too slow. iXL developed a new tool, called a Conceptual User Interface (CUI), that allowed us to quickly and iteratively design interactive Web user interfaces in a shorter period of time. To improve quality and efficiency, we used the CUI with other design steps and tools.
Introduction Things happen quickly on the Web. This includes user interface design. Customers who ask our company to design e-commerce site are especially demanding. These customers want their Web businesses up immediately. Their e-commerce sites have complex user interactivity, but the customers want to see page designs very quickly. Once they see page designs, these customers want us to make very rapid design iterations1, 2.
User interface designers for e-commerce sites have the following challenges:
- Design complex Web pages quickly.
- Make it easy for customers to understand the designs, including interactivity.
- Get repeated feedback from customers.
- Based on this feedback, quickly improve the designs.
Previous Design Tools
Until recently, we designed Web pages using Visio3 and Microsoft Word4. Visio allowed us to drag and drop window controls, such as entry fields and radio buttons, to draw a visally complete, but static, representation of a Web page. We copied each Visio page into Microsoft Word. Then, for each page, we wrote text that described how each of the controls on the page worked. Finally, we e-mailed the designs to our customers for review.
Using these tools to design Web pages had several disadvantages. Since the page designs were static, it was difficult for customers to understand the designs, especially interactive aspects of the designs. For example, the textual descriptions made it hard for customers to evaluate whether too many clicks were required to perform a task. Because the controls Visio showed on the page designs were desktop graphical user interface controls rather than HTML controls, the Visio page designs were not accurate representations of the pages' appearance. It was cumbersome, time-consuming, and expensive for us to make changes to our designs. The page designs were graphics. When customers wanted to change the name of a global navigation control, we could not do a "search and replace." We had to change each page individually. Finally, it was difficult to remotely walk customers through the design. Due to software and hardware compatibility problems, customers sometimes were unable to print out our design documents quite right. As a result, planned teleconferences to review the design were often cancelled.
Conceptual User Interface (CUI)
To better meet our customer's needs, we developed a new tool and modified our methodology. The tool is called a Conceptual User Interface (CUI). We use it to quickly and iteratively show Web page design concepts. We selected Macromedia Dreamweaver5 as our design tool because it allows us to quickly create HTML pages without programming in HTML. Using Dreamweaver, we were able to drag and drop controls to create functional Web pages. We also made working hyperlinks, dropdown menus, and pop-up windows.
We did not try to show the graphical, visual appearance of the pages. We did not take the time to produce robust, professional-quality, reusable HTML code. Instead, we focused on showing design concepts for page layout, control use, navigation, and interactivity. Figure 1 shows a CUI for the main page of the Ballard Designs e-commerce site.
Figure 1. Conceptual user interface (CUI) for Ballard Designs e-commerce site
We developed the phrase "Conceptual User Interface" because the word with the closest meaning, "prototype," did not capture our focus on concepts for function rather than design appearance. In addition, the word "prototype" held different meanings for different people. HTMLers believed a "prototype" was an early design that would change. Engineers believed a "prototype" was a complete, working application that was being tested just before it went live. Customers often believed that a "prototype" was a new, finished product that was available immediately. So, because our tool focused on functional design concepts for Web user interfaces, and because we wanted to avoid the baggage associated with the word "prototype," we developed the phrase "Conceptual User Interface."
So, a CUI is not a prototype. It does not look like the final design; it works like the final design.
We minimized the use of graphics in a CUI. If customers saw graphics, they tended to believe the CUI showed what their site would look like. The graphics distracted customers from the task of defining concepts for navigation, layout, and interactivity. We needed to define these concepts before our Creative team could design graphics. So, in the CUI we used hyperlinks such as "Company logo," instead of the actual, clickable graphical logo, text that said "insert photo here" instead of an actual photograph, and a simple, white background. The CUI was usually unattractive, but it did show how the customers' site would work.
The CUI allowed us to quickly design Web pages that showed how the controls on a page might be organized and how the controls might function. The CUI gave customers a much better feel for the interactivity of the proposed e-commerce site. Since we used Dreamweaver, we could make design changes much more quickly than we could with Visio and Word. This allowed us to have rapid design-review-redesign sessions with our customers. Sometimes, we scheduled these sessions only a day apart from each other. These iterative design sessions allowed us to nail down major design decisions before we invested the time and money to write design specifications, create graphics, or write professional-quality HTML.
Because the design was done in HTML, we posted the CUI to our Extranet. This allowed our customers to review the designs from their offices. We also reviewed the design pages via conference calls and meetings in a room with a projector and an Internet connection.
Methodology
By itself, the CUI was not adequate for designing e-commerce sites. We used the CUI in conjunction with other design tools and design steps.
Step 1. We iterated the CUI until customers were satisfied with the concepts for site organization, navigation, page layout, and control functionality.
Step 2. Our graphics experts used Adobe Photoshop to create static visual compositions (or "comps") of some sample pages. The comps showed visual representations of the pages. The comps helped to communicate the impression, feeling, emotion, brand, or image of the site. Like the CUI functional design, the graphics experts iterated the comps with the customers. Figure 2 shows a comp for the main page of the Ballard Designs e-commerce site.
Step 3. The user interface designers created a detailed description of the design. This description allowed the HTMLers who programmed the front-end user interface (using HTML and JavaScript) and the engineers who programmed the back-end systems (such as a database or Broadvision) to do their work. The user interface designers inserted the static visual representations of the pages into Microsoft Word, then supplemented each visual representation with detailed specifications that describe how each control worked, what happened when there was a specific error, etc. We called this document the Interactive Design Specification.
Step 4. The HTML programmers used the Interactive Design Specification and professional-quality HTML code to build an interactive prototype. We called this the Working Prototype. The Working Prototype included every page of the e-commerce site, but it did not connect to the back-end systems. The Working Prototype looked very realistic because it used all the final visual, graphical designs. Customers reviewed the Working Prototype and gave us feedback, then we made the changes that the customers requested. We documented these changes in the visual representations, the Interactive Design Specification, and the Working Prototype.
Step 5. The programmers connected the front-end code to the back-end code to create the final design. Figure 3 shows the final design of the Ballard Designs site. Figure 4 shows the methodology that we use with a CUI.
Figure 2. Visual design composition for Ballard Designs e-commerce site
Tips
After building CUIs on several projects, we learned some techniques that make CUIs more effective.
Don't make your CUI perfect. Don't take the time to line up controls in straight rows and columns. Don't worry about the fonts or font sizes. If you introduce a new function, don't change every screen that may use the function. Show the idea on one page, get customer approval, then change all the affected pages. Focus on iterating your functional design concepts quickly rather than making the CUI look or work perfectly.
Minimize the use of graphics in your CUI. If you put lots of graphics in your CUI, then customers will believe that the site will look the way you show it in the CUI. This is not the case. The CUI is intended to look ugly. It shows functional design concepts, not visual design concepts. The graphics come later. In the CUI, only use graphics to show necessary functions such as the size and shape of product images or thumbnails that highlight product features. By minimizing the use of graphics, you can also perform quicker design iterations.
Use the CUI to drive the visual design of the site. The CUI shows how the site will be organized, the names of the navigation controls, the general layout of individual pages, and the functionality of most of the controls. Because form follows function6, the graphics should support the functional design of the site. For example, use the graphics to show which functions are important. Complete most of the CUI before your graphics teammates do their work.
Save old versions of your design. You can list your design versions by date on your Extranet. That way, you and your customers can see the progress of the design over time. Plus, you can review design concepts that were replaced or rejected. During a design review meeting, customers may want to see and discuss an older design concept.
Figure 3. Final design of main page of Ballard Designs (http://www.ballarddesigns.com) e-commerce site
Figure 4. CUI methodology
Advantages
A CUI had the following advantage for designing e-commerce sites:
- Allowed for quick and easy changes
- Provided ability to show interactivity
- Could be posted on an extranet for customer feedback
- Got customers more closely involved with the designs of their e-commerce sites
- Allowed programmers to do their work nearly right the first time because customers understood, approved, and were satisfied with the designs
- Allowed higher quality design in less time
- Reduced time, cost, and frustration of redesign work
Disadvantages
A CUI had the following disadvantages for designing e-commerce sites:
- Did not show the visual design (for example, no real graphics)
- Confused some customers who believed that what they saw was what they would get
- Did not provide reusable HTML code (better to use original, professional-quality code instead)
- Still required the user interface designer to write an interactive design specification document
Conclusions
iXL user interface designers successfully used CUIs to design several e-commerce and business-to-business sites, including Ballard Designs, GE Power Parts & Services, Home Depot, and TravelSmith. Our customers were able to understand our design concepts and give us early and repeated feedback. The CUIs saved time and improved the quality of the user interface designs. We believe that CUIs are a promising tool for designing the complex, highly interactive user interfaces required for e-commerce sites.
References
- Najjar, L. J. (1990). Rapid prototyping (TR 52.0020). Atlanta, GA: IBM Corporation.
- Isensee, S. and Rudd, J. (1996). The art of rapid prototyping. London: International Thomson Computer Press.
- Microsoft Visio Web site. Available: http://www.visio.com/
- Microsoft Word Web site. Available: http://www.microsoft.com/office/word/default.htm
- Macromedia Dreamweaver Web site. Available: http://www.macromedia.com/software/dreamweaver/
- Soukhanov, Anne H. et al. (1996). Louis Henry Sullivan. In American Heritage Dictionary of the English Language (Third edition). Boston: Houghton Mifflin. Available: http://www.bartleby.com/cgi-bin/texis/webinator/sitesearch/?query=Louis+Henry+Sullivan&db=db&cmd=context&id=38d46f4474b#hit2
Acknowledgements
I thank Will Payman and Sean Romer for their generous assistance with the CUI concept and this paper. I thank Laurie Najjar for her helpful editorial reviews.
Lawrence Najjar is a Senior Usability Engineer in the Information Architecture department at iXL in Atlanta, Georgia, USA. He designs user interfaces for e-commerce sites and other Web applications for customers that include AOL, Delta Air Lines, General Electric, Home Depot, and Thomson Financial. Lawrence holds a Ph.D. in engineering psychology from the Georgia Institute of Technology.
© Internet Technical Group
Last update: December 31, 2000
URL: http://www.sandia.gov/itg/newsletter/dec00/article_cui.html