Minimalism in e-Commerce pt 1
Seeing as the movie was not a primary concern when production started, most of the more experienced team members were working on A Bugs Life. Additionally, Director Lee Unkrich described the story as “all over the place.” Once the movie was upgraded to feature, 12 minutes of footage needed to be added to the movie, so Chief Creative John Lasseter and the rest of the story team scheduled an emergency “story summit” over a weekend, which at the end they had hoped to have the initial 12 minutes that they needed.
In actuality, what came out of that meeting was a whole new story. Top to bottom rewrite. The team members took a hard look at what they had, and realized that ultimately it was a mess, and needed to be scrapped. It was a tough decision, but having an incredibly high level of creative integrity, they knew that they had to start from scratch.
But it gets better. They burned through so much time, that they had to deliver a completed film in 9 months. Just to give you perspective, a normal animated film (let along a cutting edge 3D animated film) took about 3 to 4 years. So this was not only an issue of throwing away thousands of man hours, but also producing the new movie in a quarter of the time.
As we now know, the movie was insanely good (I am an unabashed Pixar fanatic), and this was indeed the right decision. I am sure it was not an easy one though. However, the team had learned so much in the stuff that they threw away, that they were able to start again, from scratch, and build a story that met the goals of the new criteria: a feature length film.
Starting from scratch
When starting a new design project, we start by defining scope and requirements for the project, and once scope, requirements and strategy are defined, we start working on concepts. Oftentimes, we try several comps with different approaches. In trying those different concepts, we pick one to start with, and then retrofit requirements that are not met on to the approved direction, with varying degrees of success.
What happens when there are one or many several fatal flaws in the design that start to be uncovered? On a complex web project with several moving parts (social, commerce, advertising, etc), no matter how many questions you ask upfront, you are going to hit roadblocks. There are going to be requirements from other departments that the core team is unaware of. There is going to be a learning curve, especially if you work for an agency. At an agency, you will not have the benefit of a history and will have to take requirements at face value by a third party, and you may not have access to have a conversation with these people. This makes the job even more difficult.
If you add to this an expectation by client or stakeholders that the approved design would remain in tact, but that a few things will be retrofitted to accommodate the requirements, there can be trouble. I personally have found this situation a “lose, Lose” situation until I figured out how to handle it.
After presenting initial concepts, throw them out and start from scratch.
Why would someone work for a few weeks, and throw away all the work? A builder doesn’t work for 3 weeks, and then tear down the house and build a new one? Filmmakers (usually) don’t film a movie and then start from scratch? Why would you complete a design and then throw it out.
In Agile development process, there is a term called a spike. A “Spike” is a short period of exploration where a developer will try a few things simply with the idea of learning what they need to, and finding out a strategy to move forward. It is timeboxed, usually to a sprint, and at the end of the sprint, all the code is thrown away.
Yes, thrown away.
The idea with a spike is to learn all that you can by doing it once, making mistakes, not worrying about clean code, trying stuff out, uncovering possible risks that can only be uncovered by working on something, and then writing clean code on the second attempt. Developers are often faced with new technology, and often have to program things that they simply have never done before. You can’t get everything right the first time you try something.
In design, we have experience with solving similar issues, but we never create the same project twice, so we are doing the same thing as developers: trying something new that we have never done before. Furthermore, we are working with a complex set of moving parts, all of which need to move seamlessly, so that the business, consumer and developers all are able to complete their tasks. It requires exploration.
As projects have gotten more and more complex, I found by accident, that the idea of creating a concept and refining it, doesn’t work. I had the fortune of being on a few projects where the business lacked focus, and we had to start from scratch. In doing so, the things we learned in the first iterations led us to a bulletproof v 2.0. Fortunately we had not started development on a project that was just not right. We did what Pixar did, and threw it away. It just wasn’t right and it wasn’t working right.
One of the most important lessons I have learned is that good design does not need retrofitting. Good design just works. There is not a long list of exceptions for use cases. There is a minimal list of adjustments for use cases, but overall, I’ve found that if you find yourself coming up with an unreasonable amount of interactive accommodations, you have the wrong concept. Another barometer, is that after one round of revision, the excitement is gone, and there are a bunch of additional use cases that are not met. This is another sign that your design is not right.
When working on projects now, I treat every concept as a spike, and throw it all away. I make note of all the things that are working, and bring those over to the new concept. I also have all the assets from the previous iteration, which saves a lot of time (although I start with a completely new document as well). By trying a lot of things, running into problems, asking more questions, thinking through more operational and user scenarios, you will compile your “real list” of requirements. Some things that you thought that might be negotiable, might not be possible due to time or budget constraints, and it is better to create a unique solution that is solid from the foundation than to retrofit an idea.
I also make it very clear to stakeholders that we will be starting from scratch on ONE concept from our findings, and we can do it in less than a quarter of the time. We will also come up with the right solution this time, and that the exploration allows us to try new things without hitting it out of the park on the first try.
If it’s the right solution. It will just work and you will know, and all the stakeholders will know.
Don’t be afraid to throw everything out and start from scratch.
Minimalism has always had a great relationship with retail. Since the 60’s when minimalism started to take off, treatment upwardly mobile consumers have embraced the design concept’s beauty, find and closely associated it with products of high quality. Ever since, minimalism has been a design style that emphasized a high design aesthetic. It is closely aligned with the principles of simplicity from whence it springs. Using it in design and marketing makes products seem more designed and “simpler” as well.
Influences on Minimalism
In my research for this article, I came across minimalism of all types: design, art, film music, photography, architecture. All of the disciplines embraced the concept and had their own take. I would say the most known disciplines to embrace it are art and architecture. Drawing from Japanese concepts of balance, simplicity and geometry, Architects have been inspired by minimalism for over 90 years. The concept of minimalism removes everything unnecessary and only keeps the necessary. It seems a good fit for architects, who in an attempt to create harmonious space, want to create an environment that feels spacious and expansive. The expansive design in a physical space gives you a feeling of relaxation and calm, which is the goal of most spaces.
The other main concept architects brought to minimalism was the use of top notch materials. Architects brought in high quality woods and textures, and added them to open spaces. The effect is that you really notice the nicer materials. Also adding a minimal amount of furniture allowed architects and interior designers to invest budget into a smaller quantity of furnishings, but at the same time purchasing higher quality. These higher quality furnishings and materials had more impact because they were left on their own to create impact. If you have little to look at in a room, you focus even harder on what is there. If what is left is high quality, it evokes a feeling of quality. Plus the feeling of expansion.
Web designers have taken the concepts of architects and applied them to the web. Whitespace, high end materials (such as custom photography, and illustrations), minimal elements and simplicity are all concepts that translate well to web and UI design. Visual and web designers have embraced the concepts and applied them to the medium. The effects of minimalist are the same in web design and architecture. In essence minimalist design:
- helps users focus only on what is important by removing all distraction
- gives users a feeling of relaxation and space
- connects with an emotional desire
- uses space and geometry to instruct and guide uses
- maximizes impact by removing all extraneous elements
- engages users by making them think about how the interface works
- creates a sensation of value by aligning it with other high design
- but most of all… minimalism embraces simplicity.
Remove Everything Till It Breaks.
Minimalism embraces only what is necessary, and removes what is not. It is about using only the best elements, placing them in an expert fashion and removing all that is not necessary…. and it is not easy. It takes focus, prioritization and restraint. It takes balls. It is bold to remove everything but what is necessary, and not fear that the viewer or user will not get it because of a lack of information. It is precisely this boldness which catches people’s attention and draws them in.
Take a look at the ad below. You notice a speck in the center, and try to make it out. It is only after you read the copy on the right (which is the only other element that draws your attention), that you figure out that it is a car. This ad plays a great visual trick on the user, in which the artist has got them to think by making them look for something hidden, and then, drawing them in to question what it is. Only then do we give them the answer in the lower right.
This ad illustrates a perfect example of how minimalism works. It makes our prediction sense fail, and we pay attention. We expect the page to be filled with a lot of stuff that is easy to see and to read. Most of what we see is full and easily legible. When we see something missing, it engages us and makes us question why what we expected is not there. It draws us in and makes us demand an answer to what is the speck in the middle of the page.
When it comes to minimalist web design, we engage the user by putting few elements on the page. We further engage by using beautiful elements on the page, and expertly placing them to lead them in the direction we want them to go. We minimize options and give the user only the right choice at the right time. The following trends are techniques that web designers have used to create the same effects of spaciousness, beauty, and simplicity for maximum impact and engagement.
5 of 9 trends in minimalist web design:
1. Big luscious photography
With minimal elements on a page, a beautiful photograph sucks you in like a vacuum. Imagery provides an anchor for you to focus on and balanced with a minimal amount of distraction, are incredibly impactful. The below sites each uses photography in a unique way.
- Suit Supply– Unique Image Style
Suit Supply uses a unique image style to create engagement and draw users in. The designers of the site have done more than just create great photographs, they have created a compounded effect by unifying the style. They all have a specific look, as well as an action to them.
- Lilybalou – Minimal impact navigation
This site maximizes the impact of the full screen images by using a thin minimal navigation system, and then placing it at the bottom, so the page feels more like a photo gallery than a website. They compound that with interesting front face shots of children to suck you in.
- VanMoof – Full Screen Background images
Van Moof is a bicycle manufacturer based in New York. The company offers simple bicycles that demand top dollar. This site ups the ante by using free floating content and navigation, and full screen images. This allows the images to be even bigger (or smaller) and makes the images and the navigation look separated.
- Manufacturer d’essai – Emulate a Magazine ad
Using a continuous scroll this site, this site uses large imagery to emulate a gigantic magazine spread, adding interactive elements on the page.
2. Minimal UI and navigation
Simplicity should not only apply to the amount if items on the page, but also ornamentation. The next samples are ones that remove all elements from the UI framework – all extra strokes, shadows, heavily contrasting colors, and nav bars, and removes them. These samples minimize the amount of options for navigation in order to make users go down a rabbit hole, and not distract them with extra elements. The UI is also transparent, and sometimes removed all together. The concept is to make the page look like art, and less like UI.
- Apple – forked navigation
While Apple is a company that often exemplifies good design, and there is probably not an experienced web designer alive who hasn’t been told a million times to design it “simple like the Apple website,” one of the main concepts of the apple website may not be known. The Apple website has a very simple navigation system that forks users down a certain path, and does little to cross pollinate the path. The site, as of this writing, forks by product, and immerses you in the experience of each product. It removes distraction by strategically using the fork strategy. The forked strategy is further characterized by a limited amount of navigation options (anywhere from 4 to 8) on the top level main nav. The minimalist nav philosophy is that if you have less options you will not be overwhelmed with choice and will try one of the main options, as long as the “scent” of the information is clear. Apple does a great job using this approach and giving users the scent of information to keep them clicking.
- Shoe Guru– free floating products and navigation
Shoe guru removes almost all UI elements, and free floats products. The nav bar is simply text without any ornamentation – shadows, strokes, button effects. The product display emulates a shoe wall that you would see in a shoe store, and shows only the price and name. This allows the products to really shine and be viewed without the design overpowering the product photos.
- Shopbop – Type as navigation
Shopbop does a similar thing as Shoe Guru by using only type as navigation. The site further reduces all UI to simple boxes with black borders to simplify type and maximize the impact of the banners and product display.
- RueLaLa – content as navigation.
Because of the limited amount of product in each nave category, RueLala.com uses a different strategy. They put all of the content available in one long page, and have users click direct to the category grid simply by clicking on a big beautiful product image. They use a grid approach, and while they do display a lot of content on the page that one may not technically call “minimalist” the approach here is to maximize engagement with a single page, which creates simplicity for the user, which is a key principle. Also, while not technically discouraging the user fro using the nav bar, the strategy is to use the nav bar more as a filter than proper navigation. This style of navigation has been popularized by the iPad and tablets, which in the interest of space, designers have been using hidden/collapsable navigation in order to create more space for content. As a result, they made large tap targets, that they designed for users to click on, and voila, the use of big images, minimal navigation, forced users to tap on the images, which in turn causes content strategists to create more intriguing targets to tap on.
3. Balanced Typography
The hallmark of minimalist design has always been type. When used properly, Type can create balance, asymmetry, clutter, space, density, and color. It has been the weapon of choice for minimalists for years because of its ability to convey messages when combined with images. And let’s face it beautiful typesetting is… well… beautiful. It’s engaging and exciting, but can stand all on it’s own to communicate messaging ideas. It can be used in and of itself to prioritize attention, and can be used all by itself. The below sites, use type, (expertly placed, expertly set) to create interest and lead the user to the most important items on the site.
- Bored of South Sea – Typesetting to clarify calls to action
Bored of South Sea does a grew job of using dynamic to to draw attention to it’s calls to action. When used in conjunction with a minimal amount of type styles (as illustrated here), larger or contrasting type calls attention to itself to clarify calls to action in buttons and banners, and UI.
- IWC – dynamic type for interest
Iwc has a bit of a different approach. Instead of a simplified approach, IWC uses several different sizes of type with the same uppercase setting to create a rhythm.
- Fossil – simple typesetting for clarity
The Fossil site uses less type styles and contrast in order to draw attention to the main image section, and reduce attention from navigation. The effect is a very “cataloge-y” feeling website. It feels much more like a great catalogue than a typical e-commerce website.
4. Hiding everything
“If you can’t get rid of it… hide it.” —John Maeda
As Interactive designers in e-Commerce, we often are told that you cannot hide anything because of the hit to conversion rates. The thought is that if consumers can’t see it, they don’t know it exists right?…. hmmm…. not always.
As designers, we are constantly in search of the beautiful, the simple and the elegant, and nothing is beautiful, simple nor elegant about filling a page full of a bunch of crap. It is no longer design at that point. It is retrofitting. John Maeda in his book “Simplicity” has a long section on the topic of reduction. His thought is that simple design only contains the necessary, and removes the extraneous. If something cannot be removed, then the next course of action is to hide it. In designing products, this means covers and minimal controls. In interactive design, we must create intrguiging UI and delightful interactions in order to engage users and make them want to click. It is very difficult and a slippery slope. How do we create a visual design that draws attention to hidden things so users can find what they need, without going so obvious that the site becomes clunky. messy and disorganized. At the same time, conversion rate and usability cannot be sacrificed. The below sites do a great job of engaging the user, so he wants to click around and find the hidden UI elements, making it very fun along the way.
- Nixon – Interactive elements using patterns for learnability
nixon.com is one of my favorite sites on this list. It makes you want to play with it, because on every interaction, something cool and new happens. Information is displayed on interaction, not upon load. Things like expanding menus, the banner images with hidden captions, and filters that expand, all create a great cohesive experience that encourages engagement, while serving users at the same time. It sacrifices little usability for the cool factor.
One of the concepts they use in order to create predictability is reuse of interactive design patterns. The 2 key ones are the expanding menus( which are used fortop level navigation, as well as the filter set), and the hover captions on the large images. This minimal set of patterns makes learning the site a breeze and improves usability.
- Uniqlo– Universal scroll to reveal more
,p>Uniqlo uses a different technique of hiding that some might not call hiding – the universal scroll. I would argue the way in which they do it is a hiding technique… you just use your scroll wheel instead of your click to expose. The effect is the same – it feels like you are discovering more content as you scroll and it feels like you are uncovering content.
- Makr.com – Hide labels
Makr.com does a greet job of keeping an ultra clean page by removing all type from the page until you hover over an image. The effect is an easy to read and elegant product page. They further enhance the page by adding an accordion display of the product upon click, which reveals more information as the user requires it.
5. Graceful Responsiveness
One of the fringe benefits of minimalism has been to make responsive design easier. The approach of minimal navigation, large images and minimal ornamentation makes responsive design easier, because there is simply less to scale. Large images scale nicely, there is less type and less ornaments that need to be retrofitted to the multiple screen size. If there’s less to scale, then it makes design, development and upkeep simpler and faster.
- Indochino – Going larger gracefully
Indochino does something most designers don’t consider— going large gracefully. While everybody is rightly concerned with mobile devices, this site also accommodates big screens very nicely. Using large tiled images, this site fills the screen and creates a beautiful experience not only for small screens, but for big ones as well.
- Tattly – minimal oranmentation to make responsiveness simpler
The Tattly site is truly simple: Just text, images and a few strokes. Their strategy of keeping things simple makes responsiveness easier because there is less stuff moving, shifting and scaling. This means easier coding, QA time and implementation time. If you put a site like this together the dev team will love you. Simple, elegant, AND easy to code.
- Five Simple Steps – Simplified grid
Five simple steps combines minimalism with a basic grid structure to make responsiveness easier. They use a simple 2 column grid that expands and contracts and scales images. They have worked this into the design so that it feels right and scales nicely. They took advantage of the simplicity of the layout and the whitespace to make the grid flow smoothly and make the scaling to alternative devices headache free.
That’s it for this issue!
I will do numbers 6 -9 in the next few weeks. In the meantime, you can checkout the presentation slides on slideshare.net. Email me with any questions.
- Nixon – Interactive elements using patterns for learnability