Creating a Ubiquitous Information Architecture and Designing Across Devices

Download the Egg Matrix Omnigraffle Alpha Version

Download the Egg Matrix PDF Alpha Version

The Egg Matrix is a tool for planning content, features, and scenarios when creating an information architecture that will exist across multiple devices and touch points.

Where Did the Idea Come From?

In college, I had an environmental design professor who described the field as such:

Architecture is the profession that designs the shell or the structure of the built environment. Interior design is the profession that designs the interactions and spaces inside that built environment. Landscape architecture is the profession that designs the space outside this structure.

Environmental design encompasses all three, studying our interactions with the built environment, how we move through it, how we move around it, how we integrate with the natural environment, and so on.

I always had the idea of an egg in my head, in part because he described architecture as being like a shell of sorts, and partially because we talked a lot about animal habitats and homes.

Environmental design is a human-centered design discipline that covers our physical surroundings. It considers the shared ecology between places and spaces, interiors and exteriors, the mechanic and the organic. Many of the same principles and ideals carry over into the digital space.

When the Digital World Spills Over into the Physical World

When we design for digital spaces today, it’s no longer safe to assume that the majority of our users will access our information from a similar static setup in an office or home. Digital information travels freely now between devices, locations, and online and offline habitats. In fact, it’s nearly impossible to know the context or situation that surrounds each of our users.

It also seems likely that even before we have mastered the art of designing across desktop and mobile platforms, we will find ourselves creating spaces in cars, kiosks, mirrors, table tops, refrigerators, and many other devices. There is no set of rules that tells us how to create the right mix of content and features so that our users will have a seamless experience whenever and wherever they access our information.

The Egg Matrix

The Egg Matrix is my attempt to create a tool for cataloging the different forces that should be considered when determining the architecture, features, and overall design of a multi-device experience. My hope is that it is flexible enough to be applicable to topical challenges, like designing for mobile vs desktop spaces, but that it also will encompass future needs, such as television or in-car apps.

The concept is simple. There is a subset of the experience (the egg) that you can directly control. You are responsible for the structure, the content, the messaging, and the interaction that goes into your design. There are also two equally important forces at play that contribute to the experience and overall success of what you’ve designed. There is the internal composition of the user (the yolk) and the extrinsic environment that the experience takes place in (the nest). You might be able to influence certain aspects of both areas, and you might be able to design around certain scenarios, but you’ll never be responsible for the creation of these realms.

By breaking each area down into individual factors, you’ll be able to create a better model for your structure. I’ve broken each field out into the initial factors that I thought were most crucial, but there is certainly room for expansion, refinement, and feedback.

Start with a single node of content, and build out from there. What features are needed to interact with that content? How often is the content accessed by the user? What possible contexts might the user be in when accessing the content? What belief systems might he or she be bringing to the experience?

The breakdown currently is as follows:
The Nest covers environment, location, context, and locomotion.
The Egg covers message, content, task, frequency, urgency, privacy, intimacy, tracking, and measurement.
The Yolk covers motivations, needs, desires, and knowledge.

You may find yourself creating multiple columns for a single content node to cover the array of possible touch points or devices your users might encounter.

I included a section called “messaging.” This may relate to a marketing campaign, a company brand message, or a common slogan. It’s important the spaces you design don’t contradict the messaging being broadcast to users.

I’ve also included fields for noting tracking and measurements. These are for listing how you plan to measure the experience and what measurement points you’re going to look for.

How Do You Know If The Model Is Working?

Like any other model, it has to be put into action and tested. Fortunately, this “model” can be tested in several ways. You can gather feed and ask questions of users. You can create a prototype to test. When you’re satisfied with the performance of a prototype, you can design the real deal, and then continue to make refinements with ongoing feedback.

I’ve listed the Egg Matrix worksheet here so that others can download it, play around with it, refine it, and provide feedback.

Download the Egg Matrix Omnigraffle Alpha Version

Download the Egg Matrix PDF Alpha Version

UX Pin

Portable Paper Prototyping Kit

$19.99

Buy It!

Sketch your ideas on little sticky notes.  Need to move that buy button?  No problem!  This kit looks awesome for rapid prototyping and ideation.

Paper Browser

Sketching Notebook

$16.00

Buy it!

Yes, it’s a notebook with browser windows printed on the pages.  You can choose various sizes and orientations for your browser windows (you know, to reflect screen size and such).

App Sketchbook

iPad and iPhone App Sketch Grids

$12.00

Buy It!

For the app designer in your life.  Who doesn’t want to carry around a little notebook to jot down those app ideas on the fly?  Choose from iPad or iPhone for your grids.

iPad App Stencils

(Also iPhone, Website, Android, and Sketch Pads)

$24.95

Buy It!

I’ve wanted these for awhile.  They’re like architectural stencils, except without the toilet icons.  (Which reminds me, I think I still have architectural stencils lost somewhere in a box, probably with the tracing paper.)

Stainless Steel Sharpie

Fine Point Permanent Marker

$6.75

Buy It!

Yes, it’s a Sharpie.  A Stainless Steel Fricking Sharpie!  And if you’re going to give someone a bunch of sketching pads, you might as well thrown in some pens.  Also, think stocking stuffer.

Big Idea Adhesive Notes

Sticky Notes for Content Strategy?

$10.00

Buy It!

Let’s face it – everyone needs more sticky notes.  And these might even help you organize your content and ideas better.

2011 Wall Calendar

With Extra Special Geometric Illustrations

$25.00

Buy It!

This is the only decent time of the year to buy a calendar, you might as well make it a good one.  If you don’t like walls, there’s also a desktop version.  Hand-illustrated.

Moleskin for iPad

AKA “Moleskin Folio Digital Tablet Cover”

$64.99

Buy It!

The best case for you iPad.  Combine web browsing with sketching, or just take notes in both places.  I think this is the perfect combination.

Personal Library Kit

With Return Date Cards!

$16.95

Buy It!

Library science majors rejoice, now you can catalog your personal collection stamp a due date on each book your friends try to steal.  It really has an ink pad, a stamp, and library book cards / sleeves.

Random Geometry Wallpaper

From Hermitage

$128.00

Buy It!

Please put this wallpaper in your office, and then hang the above wall calendar over it.  Your clients might go insane.

Flowchart of the Holidays

Greeting Card

$4.50

Buy It!

If you’re only going to give someone a card, it might as well be good.  What are you doing for the holidays?  Just  follow the chart.

Everything Explained Through Flowcharts

The Book

$11.55

Buy It!

Even the Table of Contents is a flowchart.

16 Months Worth of Drawing Exercises in Microsoft Excel

By Danielle Aubert

$47.50

Buy It!

No actual drawing exercises or Excel tutorials here, but the author spent 16 months using Excel to create various pieces of art.  Thought R was fun? Check out these Excel pieces.

Map Art Prints

Hand-Drawn City Prints

$35.00

Buy It!

Inked by hand with little lines, these city prints map out the streets of famous cities.  Choose from Portland, San Francisco, Chicago, Boston, Rome, Madrid, and more.

City Neighborhood Posters

Ork Posters

$22.00

Buy It!

I first saw these in a friend’s apartment. She had one for each city she’d lived in: Portland, Los Angeles, and Seattle.  The posters squish the names of the different city districts into areas into the areas they cover.

Nonsensical Infographics

Art Without The Math

$20.00 +

Buy It!

These pictures (four in all) from artist Chad Hagen show the beauty of infographics without the mess of trying to understand what they actually mean.  They’d also look great in my house.

Through adherence to strict usability principles and continuous optimization testing, many online merchants have arrived at a set of standard features that keep their ecommerce stores easy to use and simple to buy from.  Even small design and functionality changes can have large effects on conversion rate and order value.  Here are 21 usability principles that I recommend all ecommerce websites consider.

1 – Use Visual Navigation Cues

Show your customer where he or she is within the site by using a breadcrumb trail.  Breadcrumbs should provide a quick visual reference so your customer can easily determine where product pages and subcategories lie within the overall structure of your site.  Use headers and subheaders on your page to break-up text and product information into easy-to-digest and quick to find morsels.

Breadcrumb Navigation on Bluefly

2 – Offer Lots of Sort Options

If you have product categories and subcategories that include more than just a handful of products, be sure and offer multiple ways to quickly sort the product listings.  Pertinent sort options for your site might include High Price to Low Price, Low Price to High Price, Top Rated to Lowest Rated, Lowest Rated to Highest Rated, Bestselling, Popularity, Name A to Z, Name Z to A, Most Reviews, Least Reviews, Newest, Featured, and others.

3 – Let Customers Choose The Number of Items They See

Nothing is more frustrating than wanting to quickly visually skim the products within a category, only to be limited to seeing just a few items on a category page.  Let your shopper choose how many products she wants to see on a category page.  You can have options that range from 9 to 99 to best suite your shoppers’ preferences.  Make one option a “View All” so that customers can quickly see every product in a particular category and make fast decisions about whether to dig deeper into that particular product style.

Revolve Clothing Lets You Select the Number of Items That Appear On A Page

4 – Offer Browsing Refinements

Let your customer control the shopping process and easily filter through your large product categories by offering plenty of refinements on your category, subcategory, and search pages.  Include filters appropriate to your product lines that will make it easy for the shopper to compare products and quickly generate pages of items that include attributes he’s searching for.  If you sell shoes, you may want to allow attribute refinements by color, heel height, shoe style, shoe size, price, and brand.  If you sell TVs, you may consider options like type (LCD, Plasma, OLED), screen size, resolution, price, brand, and aspect ratio.

At Endless, You Can Add or Remove Product Attributes to Refine Your Search

5 – Make Narrowing Refinements Removable

Just like you should include lots of options for your shoppers to drill down into the product attributes, make sure that narrowing refinements can be remove.  That way, if you land someone on a customized page, the shopper can choose to de-select some of the options he’s less interested in.  Active shoppers may also prefer to delete product attributes from their selections rather than hitting the back button and retracing their steps when in the middle of searching for product options.

6 – Make The Search Bar Obvious

Put your search bar above the fold, preferably somewhere up in the header or top nav portion of your page.  Make the search bar big enough to find without trying, and don’t let customers second-guess it by including similarly-styled email sign-ups or other form fields within close proximity of the search bar.

7 – Help Your Customer Search

Searches are rarely perfect.  Help your shoppers along the search process by including auto-corrections or suggestions for any misspellings that get typed into your search.  Include a “Did You Mean?” recommendation when searches return no results.  If your search platform returns categories and products, give the searcher some reference by listing how many product results are within each of the categories returned.  Begin showing popularly searched for terms and results in a search box dropdown as your customer begins typing.

8 – Put Contact Info in Plain Sight

Put your customer service contact phone number above the fold on all your pages.  If you don’t do customer service via phone, or if you really don’t want your phone number in the header space of your pages, at least include a link to your contact email, live chat, or customer service page in the header where it will be easy to locate.

ABT Electronics Prominently Displays a Phone Number and Live Chat in the Header

9 – Use A Persistent Shopping Cart

Keep your shopping cart link and/or icon above the fold on every page.  Keep it in the same place on each page, and make sure it’s on every page within the ecommerce site.  When a shopper adds an item to the cart, represent the action by showing a visual change in the total number of items added to the cart.  If you can’t create a dynamic item tally within your ecommerce platform, at least show a state change of some sort (change the color, change the iconography) when an item has been added to the cart.

The Office Max Shopping Cart Updates Once An Item Had Been Added

10 – Show Products On Your Category Pages

Don’t make your customer click through one or more layers of product categories before seeing actual products.  Put all of your products within a category on that category page.  If you’re using category pages as a way to show subcategories and refinements, that’s fine (see numbers  4 and 5).  But be sure and show at least a first page of products within that category without making the customer navigate to a subcategory page first. (Tip: Make category overview pages that display a representative assortment of products accessible with just one click from the homepage.)

This Site Fails to Show Any Products on the First Brand Category Page

11 – Include a Detailed Product Description

In a brick-and-mortar retail store, the shopper has a greater opportunity to touch a product, try it on, shake it, smell it, and maybe even peek inside the box.  In an online environment, all you’ve got to sell your products are product copy and imagery.  Good copy sells.  Make your product description as detailed as possible, but don’t think you can’t have fun with it.  Enticing, humorous, or vividly visual descriptions can convince customers to buy purely with words.  Include as many specifics as possible about use, size, fit, fabric or materials, weight, compatibility, and anything else that might be important to the decision-making processes for your specific product line.

12 – Use Quality Imagery

That single small manufacturer-supplied photo isn’t going to cut it.  Get high-quality photos of each of your products.  Include shots from multiple angles.  Provide photos with the different color combinations.  Show the clothing on a model.  Show the furniture in a room.  Let your customer zoom in or open an enlarged image.  If you’ve got the resources, include product demonstration videos with someone explaining how the item works, how it’s assembled, or how it looks when it’s worn.

13 – Make the Add to Cart Button Visible

Surprisingly, product pages still exist where it looks like the Add to Cart button was an afterthought.  If your intent is for website visitors to purchase your products online, then be sure and make your buy button stand out.  Keep it above the fold of the product page, and put it near the top of the product information.  Choose a color or design that stands out and contrasts with your other page elements.  Don’t hide it within a cluttered mess of product information.

Toys R Us Makes Their Price and Buy Button Stand Out By Using a Contrasting Color for Both

14 – Make the Price Easy to Find

It is much more difficult to convince a shopper to buy something if she can’t figure out how much it will cost.  Make your product price bigger and bolder than your other on-page text, and surround it by whitespace so that it stands out.  Keep it within proximity of the buy button, don’t bury it down on the page.  If your customer is about to save money, highlight that by showing the sale price or the discount off the MSRP.  Make it clear how much money your customer is saving, but don’t include so many numbers that it becomes difficult to tell which is the actual product price.

15 – State Your Lead Time or Product Availability

Use phrases like “Out of stock but coming soon,” “Almost sold out,” “In stock and ready to ship,” or “Pre-order only” to indicate the availability of the item.  Don’t be afraid to indicate lead time.  If you’re upfront with your lead time and your lead time is accurate, (include phrases like “Ships Today,” “Ships in 2-3 Business Days,” or “Ships in 10 Business Days”), then your buyers will be less likely to become irritated by longer wait times.  Don’t ever make a shopper add an item to her cart (or worse yet, make it all the way to the checkout) before indicating that the item is out of stock or unavailable.

This Product Description from National Business Furniture Says When the Product is Expected to Ship

16 – Show Cross-Sells and Related Products

Offer browsers other product options from the category or product pages.  You can include fields for cross-sells or up-sells for the current product type, related accessories, popular products, or best sellers. Your customer will have more options for browsing through the depth of your product catalog, and you’ll increase your opportunities for making a sale.

17 – Offer Multiple Shipping Options

You don’t need to provide the full gamut of shipping services from the likes of UPS, FedEx, DHL, and the postal service.  But if your ecommerce site offers several shipping options, then your store will be better positioned to capture sales from customers with different needs and urgency timeframes.  By including shipping from more than one carrier, your customers will be able to choose one that they are familiar with.  Make sure your delivery options are all clearly stated.

18 – Allow Checkout as a Guest

Don’t force your customer to create any kind of account.  Offer checkout as a guest, checkout as a returning customer, and the option to sign-up with a new account.  However don’t require that shoppers have an account before they add items to their carts or make modifications to the items in their carts, and don’t insist that they sign-up as a user in order to make a purchase.

19 – Show Recognizable Security Measures

Convice your shoppers that they are making a purchase from a trusted and safe site by presenting recognizable security badges or trust certificates on site pages and by using an SSL certificate at checkout.  Trust and security certificates should reassure would-be buyers that their sensitive credit card and personal data is safe from hackers.  Imagery badges from sites like Verisafe, McAfee, and Thawte indicate that the site is being monitored for security breaches and that private data will be kept safe.

National Business Furniture Suggests Safe Shopping by Showing their McAfee, VeriSign, and BBB Badges

20 – Let Customers Confirm Their Order Details

In the last step of the checkout process, present your shoppers with a chance to confirm every aspect of their purchase – before they hit the submit button.  They should have one last opportunity to double check the products they’ve set to order, their shipping and billing addresses, their chosen shipping method, and their payment details.  During the checkout process, reassure customers that they will have a chance to check their order before they submit it for purchase.  If customers can double-check their order details one last time, your rate of cancellations or calls to change incorrect order details may go down.

21 – Send a Follow Up Confirmation Email

Once an order has been placed, have a confirmation email ready to go that is automatically generated and will be immediately sent to the customer.  Show as many of the order details as possible, including a line item list of products ordered, a reiteration of the bill-to and ship-to addresses, the payment account that the purchase was charged to, and a notice on when shipment tracking will be available.  There should be a link back to the website where the customer can login to his account to view order history online.  For customers who checked out as a guest, offer a link for creating an account.  You can also use space in the confirmation email for sharing discounts good for future purchases, highlighting popular items, or making upsell or related product suggestions that the buyer might be interested in based on his recent purchase.  Did he just purchase a new computer?  This could be a good time to include a reminder that it’s not too late to purchase an extended warranty for new electronics.

The Order Confirmation Email From Rue La La Presents All The Order Details

Final Thoughts

The implementation of these best practices can play a great role in changing how long shoppers stay on your ecommerce website and how many eventually make a purchase.  While the field of ecommerce has matured, many retailers – both large and small – are still guilty of site features and functionalities that ultimately make it more difficult or less desirable for a customer to shop online.  While these 21 tips do not represent the ultimate list of usability standards for ecommerce sites, their implementation and use may increase the order value, conversion rate, or engagement level of your online shoppers.