Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 25 2013

13:57

My Workflow To Design And Develop A Modern Portfolio Website


  

A long time ago in a galaxy far, far away… a youngling designer embarked on an epic journey strewn with perilous layout challenges, constant procrastination, devious jQuery errors and deadly Internet Explorer bugs. It was a rite of passage that all designers must take, in order to stand proud with their peers in this wide world we call “The Web”. Yes, I’m talking about creating your own portfolio website.

I recently re-designed my own portfolio site, it was a challenging but enjoyable experience that I really learned a lot from. My goal was to create a unique online presence that represented my personality and displayed my design work in detail, while of course acting as a promotional medium to gain more business and exposure.

Behind the scenes look at my design and development workflow.
Behind the scenes look at my design and development workflow.

After receiving a bunch of emails asking me how I designed and built my site, I decided to write this article to give a behind the scenes look at my journey and some of the things I learned along the way. I’ll discuss best practices in modern web design and go through the entire design and development workflow I used to create my site, from the initial planning stage to the final live website including:

  • project planning,
  • branding,
  • designing wireframes,
  • responsive design and flexible grids,
  • using LESS and SASS,
  • catering for high definition screens,
  • creating flexible images,
  • animating content,
  • WordPress development and
  • testing and analytics.

I hope it helps and inspires other designers out there looking to create their own unique portfolio website. We’ve got a lot to get through, so let’s get started.

Project Planning

Defining your Brief

The first thing I do with any project is figure out exactly what I want to achieve and write it down. What is the purpose of the project? What problem am I trying to solve? For me, my goal was to create an online profile to promote my design work and gain more exposure. It needed to allow me to write articles, display my design work and also allow people to contact me easily. I also wanted it to be unique and memorable while representing my personality.

At this point we simply want to figure out our end goal, we’re not worried about how we will get there. Write down your goals, and make sure you look back at them at later stages in the project to ensure that you’re on track.

Initial Research and Idea Generation

It’s always a good idea to do some initial research to get the creative juices flowing. Inspiration can come from anywhere and it can strike you at any time, usually when you’re in bed and on the verge of falling asleep (and of course there’s not a notebook in sight). I like to check out websites like Awwwards, Dribbble and Creattica for inspiration. But sometimes it’s best not to look at what other designers have done, because once you’ve seen it, it’s sometimes hard to think of your own ideas.

Instead, I’d suggest making a cup of tea, finding a comfortable spot and brainstorming your own solutions to the problem at hand. All you need at this stage is a pen, a sketchbook and your thoughts. Hopefully that way you’ll be able to come up with something innovative that hasn’t been done before. There are plenty of methods you can use to generate ideas. Have a think about your personality and what makes you unique as a designer. What are your interests? How are you different? Do you have a particular design style? Do you specialize in a certain area of design? Do you have unusually big ears? Find an angle that represents you and integrate that into your design.

portfolio of justin aguilar
Justin Aguilar illustrates his workspace in his portfolio design.

portfolio of meng to
Meng To gets straight to the point with his design case studies.

portfolio of stephen burgess
Stephen Burgess is a developer, but he shows a great understanding of design and UX with his unique site.

After some initial research I wrote down a few ideas and elements that I wanted to include in my portfolio site.

  • My skill set is a mix of both coding and design and I want this to be shown prominently.
  • I’m a big fan of minimalist design and want to stick with a mainly black and white colour palette to allow my design work to shine through.
  • I’d like to use my own photo as a hero image to inject some personality into the site.
  • I enjoy the experience of seeing animations happen as I scroll down a page.
  • I’ve never liked the jerky way in which one webpage jumps to another, so I want to make sure my site transitions smoothly from one page to another.
  • I like generous amounts of white space and a full width layout.
  • Having a responsive site is important to me as I want mobile and tablet users to also have an optimal user experience.
  • I want my design case studies to tell a story about my design process, rather than just being a gallery of random images without context.

Create a Timeline

Once you’ve got your ideas together and you know which direction you’re headed in, it’s always a good idea to create a rough project timeline. I’m not talking about creating strict deadlines or anything, it’s more of a guide to help you organize tasks and stay productive and motivated. Simply list the tasks you need to do and estimate the amount of time each one will take. This will give you a rough outline of how long your project will take, as well as giving you a task list to work from. Of course some of your time estimates might be a little off, but that’s fine and you can adjust your timeline as you go. A little bit of organization goes a long way and it’s good practice to get into this habit.

Design

Designing your Brand

Your brand is basically the visual language that describes who you are and will determine how others see you. For my brand I wanted to convey a clean, sleek and minimal look and feel. I kept things quite simple and decided to create a logo mark from my initials using a minimal black and white colour palette. I sketched out some initial ideas and experimented with various typography and letter arrangements, before deciding on the final logo design (which I drew in Adobe Illustrator). If you’re having trouble coming up with a logo design, you might like to have a read of a systematic approach to logo design.

adham dannaway logo design
My final logo design.

As part of my branding I also wanted to design an avatar image of my face, that I could use on my website along with various social media platforms. It would need to represent me as a designer and developer while also being unique and memorable.

After countless hours of brainstorming (more like procrastination), I finally had an idea that made sense. The idea was to take a photo of my face and cut it in half. One side would portray the creative designer in me, while the other showed my logical coding side. After numerous sketches and a lot of fiddling in Photoshop, I was finally happy with the avatar image concept. I used pastel colours, grunge style brushes and masks to achieve the aesthetic I was after.

adham dannaway avatar concept
My final avatar image concept.

Creating Content

I’ve noticed that a lot of designers leave content creation until the end of the project, as they’re more interested in the layout and design aesthetics of the website (the fun stuff). Content creation should happen early in the project, as your content will determine the appropriate design for the site. What information do you need to provide to your visitors? Have a think about what you want to say and how you want to say it. Should it be written as simple text or would it make more sense as an image or diagram?

When writing your copy I think it’s best to be concise and friendly. I like to write in the first-person to make it feel more personable. Break your copy up into small chunks to improve readability and make it easy to scan. I wrote a draft of my content and broke it up into six main parts; homepage introduction, a bit about me, places I’ve been featured, my design work, my blog articles and my contact details.

Displaying your Design Work

The most important piece of content is your portfolio of design work, as this is what most of your visitors want to see. Gather your best work and explain the process and workflow behind it. There’s nothing worse than a vague portfolio of random images with no context or explanation. Try to only include the type of work you’re looking to do more of, rather than all of your work. This will help you target the appropriate clients in the future.

People want to see your work in as much detail as possible, so don’t shrink it down to a small size. Try to keep your designs at their actual size if you can. Make sure it’s easy for visitors to quickly navigate through all of your work. Talk about the challenges you came up against and how you solved them. Design is all about problem solving, so let your visitors know why your design looks and works the way it does. Remember, you’re telling a story so try and make it as interesting and informative as possible. Now that we have our content figured out, we can move onto sketching wireframes.

portfolio case study
Soft Facade have beautiful, in-depth design case studies.

Sketching Wireframes

The approach I take to sketching wireframes is simple but effective, and all you need is a pen and a sketchbook. I firstly write down a list of all the elements I need to include on the webpage. I then group related elements together before prioritizing these groups based on their importance. Here is my list of elements for my contact page.

wireframe elements list
List of page elements for my contact page.

Once you’ve got your page elements grouped and prioritized, it’s much easier to arrange them on the page. Place your more important elements towards the top of the page and use white space to create your groupings. I took a desktop-first approach to the design of my site, as I wanted to focus on displaying my design work in detail on a larger screen.

When we come to writing the CSS later on, we’ll actually be taking a mobile-first approach as it will simplify our CSS code, we’ll get to that shortly. I usually sketch my wireframes with pen and paper, but you can also use tools like Balsamiq or even Photoshop or Illustrator. Here’s a wireframe for my contact page. It doesn’t need to look pretty, it’s simply a plan of your web page to work from.

contact page wireframe
Contact page wireframe.

Responsive Design and Flexible Grids

I wanted to make my site responsive to different devices to ensure an optimal user experience for visitors on desktop, tablet and mobiles. When designing websites I usually like to use a grid, as it provides a structural foundation for my design while also making the development process easier and more efficient. Joshua Mauldin sums up grids pretty well.

“Think of it like a house’s foundation. With a solid foundation, the house is stable, and building on it is easy. With a solid grid, your design can easily be adapted to accommodate whatever changes come along”.

Some designers find grids to be limiting, but it really depends on the design you have in mind. I find that using a grid results in neater and more organised looking designs. My design was quite simple so I used a custom 12 column flexible grid, but a 16 column grid will give you more definition and accuracy. I also defined a maximum width of 1040px to ensure my design didn’t look stretched on larger monitors.

Using a flexible grid (rather than having 3 separate fixed widths for mobile, tablet and desktop) means that my site scales dynamically to fit on any device width. Below is the CSS for my responsive grid, but feel free to create your own to suit your design. You can use tools like Grid Pak, Responsive Grid System, Golden Grid System and Responsify to help create your own responsive grid. I used ideas from a few of these tools to create my own custom flexible grid.

CSS for my responsive grid:



/* 12 Column Responsive Grid */

.row {

    clear: both;
    max-width: 1040px;
    margin: 0 auto;

}

[class^="col-"] {

    float: left;
    margin: 0 3.84615384615% 0 0;
    list-style: none;
    position: relative;

}

[class^="col-"]:last-child {

    margin: 0;

}

.col-1 { width: 4.8076923077% }
.col-2 { width: 13.4615384615% }
.col-3 { width: 22.1153846154% }
.col-4 { width: 30.7692307692% }
.col-5 { width: 39.4230769231% }
.col-6 { width: 48.0769230769% }
.col-7 { width: 56.7307692308% }
.col-8 { width: 65.3846153846% }
.col-9 { width: 74.0384615385% }
.col-10 { width: 82.6923076923% }
.col-11 { width: 91.3461538462% }
.col-12 { width: 100%; margin: 0 }

After looking at the CSS above, you might be wondering how the [class^="col-"] CSS selector works. It’s actually called a substring matching attribute selector and all it’s doing is selecting any classes that begin with the following string: “col-”. You can also use substring matching to select other attributes that end with a certain string or even those that contain a certain string. Substring matching is a very handy way to create more complex and powerful CSS selectors, and they’re well supported too, going as far back as IE7.

HTML for my responsive grid:

The HTML is quite simple too and consists of rows and columns, much like a table. Here is a very simple example of a two column responsive grid that I used on my site. The left column spans across five columns, while the column on the right spans across seven.



<div class="row">

    <div class="col-5">Content spans over five columns</div>
    <div class="col-7">Content spans over seven columns</div>
    
</div>

Setting Logical Breakpoints

When designing a responsive website, there will be certain widths at which the layout breaks or the text becomes squashed and difficult to read (45 to 75 characters per line is comfortable to read). These special widths are known as breakpoints and they’re usually set based on common device widths e.g. 320px to 480px for mobile, 768px to 1024px for tablets, and 1024px and over for desktops. The problem is that “common” device widths don’t really exist anymore with the growing number of different devices, so this solution doesn’t scale well.

Setting breakpoints based on the content rather than device widths is a more scalable solution. For example, rather than blindly setting a breakpoint at 768px width for tablets, I instead looked at my content and found that it looked fine until it became squashed below 600px width. I thus set a breakpoint at 600px to change the layout to ensure the content was legible at and below this width. Yes, you need to optimize the display of your site on various devices, but your content should always determine where your breakpoints lie. These are the four breakpoints I needed for my design: 320px, 600px, 1024px and 1140px.

When writing the CSS media queries for my site I took a mobile-first approach. This basically means that I wrote the mobile styles first as my base, followed by the tablet and then the desktop styles. Mobile styles are generally more simple than those needed for your desktop design, so it makes sense to write them first. They form the foundation of your styles, we can then add the more complex styles for larger screen sizes. Cascading your style sheet in this way keeps your code clean and DRY (Don’t repeat yourself). Here are my media queries below.

Media queries:



/* Mobile styles go first, outside the media queries */

@media only screen and (min-width: 321px) { 

    /* Larger mobile styles (above 320px wide) */
}

@media only screen and (min-width: 600px) {

    /* Tablet styles (above 600px wide) */
}

@media only screen and (min-width: 1024px) {

    /* Large laptop styles (above 1024px wide) */
}

@media only screen and (min-width: 1140px) {

    /* Desktop styles (above 1140px wide) */
}


With my breakpoints defined, I could sketch out the tablet and mobile wireframes. Sometimes it makes sense to hide or omit content on smaller devices, but I wanted to make sure as much content as possible was available across all devices. Why should mobile users miss out on valuable content? People are used to scrolling on mobiles anyway, so think first before removing or hiding content. The easiest solution isn’t always the best one.

Designing High Fidelity Mock-ups

Once I had my desktop and mobile wireframes sketched out, I moved into Photoshop and started mocking-up the website in more detail. I don’t like to spend too much time in Photoshop as I think that it slows down the development process. Don’t worry too much about creating a pixel-perfect design, as you’ll have time to tweak and refine it during the coding process anyway. Instead, simply mock-up the main page templates along with any other design elements and assets you need.

I mocked up my header and footer along with the basic elements of my “About me” page below to make sure I was happy with the aesthetic.

adham dannaway about me page
“About me” page mock-up.

Similarly, I didn’t mock-up any mobile or tablet designs in Photoshop, as I find it quicker to simply code these up based on the wireframes. I did however spend some time on smaller details like icons and textures, as small details like this can make a big difference to the final polish of the site.

Development

Now that we have our site planned out and all of our image assets ready to go, it’s time to start coding. So get out your headphones and your favorite text editor! My text editor of choice is Sublime Text. It’s simple, fast, powerful and easy to use. If you’re a Windows user I’d also recommend Notepad++.

I usually start from the top of the webpage and build each element one by one. Let’s start with the header navigation. I like to write out the HTML for the element first then move onto the CSS. Remember that we are actually creating the mobile version first to reduce code bloat. Depending on the complexity of your project, you can either start coding from scratch or use a base framework like HTML5 Boilerplate, Foundation or Compass.

Using CSS Pre-processors (LESS/SASS)

If you’re not yet familiar with CSS pre-processors like LESS and SASS, you should definitely familiarize yourself with them as they’ll save you a lot of time and effort and help streamline your CSS styles. A CSS pre-processor basically gives you more power when coding CSS, as it allows you to use object oriented programming practices when writing your styles.

less sass css pre processors
LESS and SASS CSS pre-processors.

We’ve all wished that we could create variables in CSS, define functions and re-use code snippets without having to copy and paste continuously. CSS pre-processors allow you to do this and much more, while keeping your styles clean and organised. Your LESS/SASS code is simply compiled and output as regular CSS.

I actually used LESS to create the CSS for my website. However, after experimenting with both LESS and SASS I feel that SASS is a more powerful solution, so I’ll be sticking to SASS from now on. Chris Coyier compares LESS and SASS and shows the subtle but important differences between the two. The decider for me was that SASS uses Compass and gives you access to a library of useful and well maintained mixins to use in your projects, LESS doesn’t. Feel free to have a play with both to see which one you prefer.

Progressive Enhancement with Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the visitors’ browser and adds those features as classes to the <html> element. We all want to take advantage of the latest CSS3 and HTML5, but what happens in older browsers that don’t support it?

Modernizr basically tells us which features are supported in the visitors’ browser, allowing us to write conditional CSS and JavaScript to handle each situation. Thus it allows us to easily take a progressive enhancement approach; providing everyone with your basic website features, while also giving those with modern browsers an enhanced experience.

Creating Flexible Images

Flexible images are a very simple but important part of any responsive website. To make your images flexible, simply place them into your responsive grid container and add the below CSS to your style sheet. They need to be inserted using the <img> tag, although there are ways to achieve flexible images using CSS background images too. If you want to get more technical and actually serve different images depending on the device being used (e.g. serving smaller images on mobiles to conserve bandwidth), you can look into these techniques for serving truly responsive images and avoiding duplicate image downloads.



img { 

    max-width: 100%; 
    height: auto !important;
}

Using CSS Image Sprites

We all know that it’s a good idea to combine your icons and image assets into CSS Image Sprites, rather than having multiple individual images loading one after the other on your site. It decreases load times and also makes it easy for you to edit and maintain image files at a later stage. I usually like to create several sprites for the different sections of a website. For example, one of my sprites contained all of my icons, while another contained the common global page template elements e.g. logo, header icons, navigation background and footer icons.

When you’re creating your sprites, it’s always a good idea to think about how your website loads. If you’ve got a bunch of image icons that are only used on a single page of a site, it’s probably best to separate them out from the main page sprite. This will ensure that they’re only loaded when they need to be, while keeping your main sprite file size low. Using sprites will also make things easier when it comes to preparing your images for high definition screens later on.

Creating image sprites can be a cumbersome process, so tools like Sprite Cow can come in handy in helping you create them quickly and easily. You can also use a combination of SASS and Compass to generate your sprites automatically from separate images.

Catering for High Definition Screens

To ensure that your site looks crisp on high definition (or Retina) screens, it’s best to try and use CSS to style as much of it as possible. Remember that some of the newer CSS styles won’t render in older browsers, this is where a progressive enhancement approach makes sense. In most cases you won’t be able to build your site completely from CSS, you’ll need images. Luckily it’s not too hard to prepare your images for high definition screens.

Basically you’ll need to create a larger version of your images that will be used on high definition screens. Since our images are contained within a sprite, all we need to do is create another version of the sprite that is exactly two times larger. Let’s say our sprite is named sprite.png, we would name our high definition sprite sprite@2x.png. To decrease load times (especially on mobile devices) it’s also a good idea to compress your images using Jpeg Mini, Tiny Png or Image Optim if you’re on a Mac.

retina image
Simply create another image twice the size of the original for high definition devices.

Once you’ve created your larger images, we simply use media queries to show the large images on high definition screens. You need to be careful with your media queries, as iPhone’s aren’t the only high definition devices around at the moment. There are other mobile phones along with Retina iPad’s and MacBook Pro’s too. I used two high definition media queries on my site; the first one is for high definition mobile devices, while the second is for tablets and laptops.

Media queries to target high definition screens:



@media
only screen and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

    /* Target all high definition screens */
}

@media 
only screen and (min-width : 600px) and (-webkit-min-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min--moz-device-pixel-ratio: 1.5), 
only screen and (min-width : 600px) and (min-device-pixel-ratio: 1.5) {

    /* Target high definition devices with screens wider than 600px */
}

Wouldn’t it be great if we could avoid the need for media queries and separate high definition images altogether?

An even better way to cater for high definition screens is to ensure your images are vectors, this means that they will scale to fit any screen size and look crisp on any device. You can actually draw your images or icons in Illustrator and export them as SVG (Scalable Vector Graphics) files. The SVG file basically consists of XML-based code that describes your image to the browser.

Another clever way to get scalable vector icons that look crisp on high definition devices is to use Icon Fonts like those from Ico Moon and Font Awesome. I didn’t actually use these methods on my site, mainly because I didn’t have many icons or vector images. But if you’re looking to use vector images and icons more heavily on your site, then these techniques will definitely come in handy.

Page to Page Transitions

I’ve never been a fan of the abrupt way in which one web page jumps to another. When you click on a link, there’s usually a sharp jump followed by images loading awkwardly and sporadically onto the page in no particular order. I wanted to control the way my content appeared, to create a smooth transition from one page to the next as a visitor navigated through my site. So when a visitor clicks on a link to go to another page of my site, the current page will basically fade away to white before taking the visitor to the next page. The next page will start from a white background, then the content will animate smoothly onto the page. I think that it creates a pleasant and consistent user experience.

To achieve my page to page transition effect, I actually needed to use a jQuery preloader plugin like jPreLoader or QueryLoader2. This ensured my images were loaded before they animated onto the page, otherwise the animations would happen before the images were there. I’m not a fan of preloaders in general as the user needs to wait until the page loads before they actually see anything, but it was necessary to achieve the page transition effect I wanted. I’m actually going to experiment with hiding the preloader if the page loads quickly and only introducing it on longer page loads. This would mean that most people would simply see one page seamlessly fade to the next, without a preloader being shown.

I’m interested to hear of any other methods to achieve page to page transitions without the need for a preloader.

Here is a very simple jQuery function that causes the page to fade out when visitors click a link to leave a page:



/* 
* Function to animate leaving a page
*/
$.fn.leavePage = function() { 	
  	
	this.click(function(event){

		// Don't go to the next page link yet
		event.preventDefault();
		linkLocation = this.href;
		
		// Fade the page out
		$('body').fadeOut(500, function(){
			
			// Then go to the next page link
			window.location = linkLocation;
		});      
	}); 
};


/* 
* Call the leavePage function on click of links with the "transition" class
*/
$('.transition').leavePage();

I wanted the “leavePage” animation to happen when visitors clicked on a link to go to another page within my site, so I simply added a class called “transition” to the appropriate links. When a visitor clicked on any link with the “transition” class, the “leavePage” animation would be triggered. This is a very simple animation example, but you could build on this with your own more complex animations.

So the user has clicked a link, the current page has faded away and they’ve landed on the next page. What happens now? Our jQuery preloader will take care of the rest. The preloader basically displays an overlay that covers your page while your page is loading. Once loading is complete, the overlay fades away to reveal your page. Of course you can create your own custom animations to animate your content onto the page in more interesting ways. I won’t go into this in too much detail, as there are many ways to animate content onto the page.

You might like to slide your content in from the sides of the page one element after the other or fade elements in from top to bottom. Basically you’ll just need to write a function to animate your content onto the page, then call this function after the page load is complete. Luckily, both of the jQuery preloaders I mentioned above have callback functions that allow you to call your animation function after the page load is complete.

Preventing FOUC (Flash of Unstyled Content)

One of the most annoying issues I had while trying to achieve my smooth transition between pages was a flash of unstyled content (FOUC) before my jQuery preloader had even started. It wasn’t always there, but every now and then I would see some of my content flash onto the page before my animations had even started. Luckily I found a clean and simple way to prevent the FOUC that worked perfectly.

Animating Content on Scroll

I love the idea of including subtle animations as the visitor scrolls down the page. It’s become a bit of a trend recently, and I think it improves the user experience and adds a touch of polish to the page. I used a simple but powerful jQuery plugin called Waypoints to help me create my on-scroll animations. It basically allows you to trigger your animations at different page scroll distances.

If you’re looking for an easy way to do more complex animations on scroll, you should check out the Scrollorama jQuery plugin.

Custom WordPress Development

I decided to build my website on a WordPress platform, mainly because I’m familiar with it and I wanted to include blog functionality on my site. It’s also a nice time-saver to be able to easily install plugins to add extra functionality to your site. It’s a pretty simple process to install WordPress onto your server and turn your static HTML pages into a WordPress theme. If you’re not familiar with WordPress, you can always use another CMS platform such as Drupal, or feel free to avoid them altogether and just build it from scratch in PHP (It really depends on the complexity of your site).

Since some of the pages on my website had quite varied layouts, I needed to create a few custom page templates. For example, I couldn’t use a standard WordPress page for my homepage as the design is quite customized. So I created a custom template for the homepage. It’s actually really simple to create a custom page template in WordPress. I also created custom templates for my portfolio item pages and contact page.

In order to separate my portfolio item posts from my blog posts, I decided to create a custom post type for my portfolio items. This basically allowed me to use a different template for blog posts and portfolio item posts. You might be able to get away with simply displaying your portfolio items as blog posts and categorizing them into a “portfolio” category to separate them from the standard blog post articles. I needed the flexibility of a custom post type with a different layout. I won’t go into more detail about WordPress development, as there’s plenty of great WordPress documentation out there already.

Testing And Analytics

Cross Browser Testing

I’m sure you’re all aware of the importance of cross browser testing to ensure that your site renders correctly across relevant browsers. You’ll notice that I didn’t say “all browsers”, that’s because you really only need to ensure that your site renders properly for your particular audience. If you know that all of your visitors are using modern browsers then you don’t need to spend valuable time and effort supporting older ones.

major browsers
Test your site on the major browsers.

So how do we test our website across all the relevant browsers? If you’re on a Mac like me you’ll be able to simply download all the modern browsers like Chrome, Safari, Opera and Firefox. So how do you test Internet Explorer on a Mac? One simple and free way to do this is to simply setup a virtual machine running Windows.

You can also use an IE emulator tool like IE Tester or alternatively sign up to services like Spoon or Browser Stack, which allow you to test your site on all major browsers including Internet Explorer 6, 7, 8, 9 and 10. Rather than leaving your cross browser testing right until the end of your project, it’s probably best to test your site every now and then during the development process to make things easier at the end.

Setup Google Analytics

It’s always a good idea to add Google Analytics to your website to collect valuable statistics on your visitors. You’ll know the location of your visitors and whether they’re arriving via Google searches or from referring sites. One of your blog posts might get mentioned on another site, if you’re not monitoring your traffic sources you might not even know about it.

Analytics will also allow you to build a profile of your visitors and get an idea of which countries they’re from and what browsers they’re using. You can use this data on an ongoing basis to improve and optimize your site for your visitors. Setting up Google Analytics on your website is free and only takes a few minutes. Simply sign up, copy and paste a small JavaScript code snippet into the footer of your site and you’re ready to go!

Time To Launch

So we’ve designed, built and tested our new portfolio website and we’re finally ready to launch (High five)! It’s one of those experiences you simply shouldn’t miss out on as a designer. I had a great time creating my site and learned a lot in the process too. Sure, there were hurdles and challenges along the way, but isn’t that what makes design so interesting? I’d love to hear about your experiences creating your own portfolio site.

I hope that my journey will help and inspire you to create your own site, or finally start that re-design you’ve been contemplating for the past few years. So get out your headphones, knuckle down and start pushing those pixels. I wish you all the best on your epic quest ahead, good luck and may the force be with you.


© Adham Dannaway for Smashing Magazine, 2013.

April 26 2011

11:49

Proximity in Design: Why I Can’t Use My Car’s A/C

Advertisement in Proximity in Design: Why I Can’t Use My Car’s A/C
 in Proximity in Design: Why I Can’t Use My Car’s A/C  in Proximity in Design: Why I Can’t Use My Car’s A/C  in Proximity in Design: Why I Can’t Use My Car’s A/C

I’m always fumbling with the A/C controls in my car. My daily commute is in hot, sunny Southern California, home of the courteous freeway driver. I can’t afford to take my eyes off the road for too long to find the control I’m looking for. Half of the time when I’m trying to adjust the temperature, I end up blowing my beard off because I’ve spun the wrong dial. If my wife’s in the car with me, I usually resort to asking her to do it for me.

Car in Proximity in Design: Why I Can’t Use My Car’s A/C

There’s a simple design principle that, had it been given greater attention, could have made this needlessly confusing interface much easier to use: proximity.

Dude, Which One’s My Car?

The human brain works by processing visual (and aural) input that occurs in proximity, either spatially or temporally. It then assembles this information into recognizable patterns and assigns meaning to it.

When I’m searching for my car in the parking lot, my eyes take in the size, shape, color and location of the cars I see (input). My brain then determines that I’m seeing an SUV, a truck, and 27 Honda Civics (patterns). Finally my brain tells me which vehicles are not mine until I “recognize” the pattern that is my car (meaning).

Tyrannosaur Attack

This pattern-making ability also causes our brains to assign meaning and create relationships even when they may not actually exist. In the film Jurassic Park, a Tyrannosaurus Rex grabs a smaller dinosaur in its teeth and shakes it around, killing it. The sound of this attack could not be recorded while shooting the scene (dinosaurs are, much to the chagrin of every school-age boy, still very much extinct). And so sound engineer Gary Rydstrom set out to create a sound that would convincingly sell the on-screen images.

Screenshot

So what sound recording did Rydstrom use to emulate a seven-ton predator ripping through the flesh of its prey? None other than his own Russell Terrier, Buster, playing with a rope toy! If you watch the scene knowing this, the effect is rather cheesy and unbelievable. But for the unsuspecting viewer, the brain willingly interprets the simultaneity of visual and aural inputs as indicating relationship and meaning. We see a dinosaur eating and we hear a simultaneous sound. Our brain tells us “this is the sight and sound of a T-Rex eating its prey.”

Proximity Without Purpose

In my car, as I’m trying to determine which button to press or dial to spin, my brain is analyzing the proximity of these various controls to discern a pattern which will help me make sense of their functions.

Let’s take a closer look:

Labels in Proximity in Design: Why I Can’t Use My Car’s A/C
Top Row (left to right): Air temperature, front window defrost, fan speed. 2nd Row: Fan off, fan mode (chest, feet, etc), A/C power. Bottom Row: Re-circulate, rear defrost, rear (back seat) fan, outside temperature indicator.

The controls are a combination of push buttons and dials that affects two basic functions: fan speed and air temperature. Each of the three control groups is comprised of one dial and one or two buttons. My pattern-seeking brain assumes that the buttons and dials are placed and grouped in a manner that has meaning. Unfortunately for my brain, in this case they aren’t.

Here’s a common two-step process I perform to cool down my car: I first turn on the A/C (step one) and then adjust the temperature (step two). To achieve this goal, I must:

  1. press the right bottom button and
  2. spin the left dial.

However, while avoiding collisions with tailgaters and cell-phone talkers, I often perform the wrong sequence. I:

  1. press the right bottom button (1, correct) and
  2. spin the same dial (2, incorrect).

By spinning the wrong dial (accidentally changing the fan speed) I end up with a hot jet blast to the face.

Reinforce Relationships

A very simple reorganization of my car’s controls would reinforce the relationships between controls and make the entire system easier to use. By placing all the controls that adjust fan speed, and all those that adjust air temperature close together, the position of each control will have assigned greater meaning and users’ overall mental effort will be decreased. The sum of these two factors (increased meaning and decreased mental effort) will result in greater user success.

Optimized in Proximity in Design: Why I Can’t Use My Car’s A/C
Controls are grouped by function to decrease mental effort and increase meaning.

In this revised layout, the controls’ proximity to the others reinforces their relationships. The left control group can be spun to adjust fan speed or pressed to turn the fan completely off. The right control group can be spun to adjust air temperature or pressed to further adjust the temperature (top button for automatic temperature, bottom button for A/C).

With these changes, my two-step process for cooling down the car is simplified. Step one is to turn on the A/C by pressing the bottom right button. Step two is to adjust the temperature by spinning the same dial.

Keeping Our Beards On

Understanding our brains’ fondness for creating meaning and patterns through proximity will help us create more intuitive interfaces and designs. If we take time to think about the way elements are positioned in relation to one each other, our interfaces will seem easier and more natural to our users. And nobody’s beard will get blown off.

Further Reading

(ik) (vf)


© dc for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: case study, grouping, interface design, meaning, mental effort, proximity, relationship

Sponsored post
feedback2020-admin
20:51

January 06 2011

14:00

Questioning Authority: Our interview with Colleen Jones, author of Clout

Book cover for Clout: the Art and Science of Influential Web Content, published by New Riders.

As far as user experience designers are concerned, 2010 can be easily summed up in two words: Content Strategy. Never before has such a relatively new discipline received such widespread press. Sure, if you were one of those designers “in the know,” you’ve probably read an article or two about Content Strategy on A List Apart. But the rest of the world didn’t have a clue…until now.

Today, companies of all sizes don’t just mention Content Strategy, they’re starting to practice it! Content is all the rage—and the pervasive question? “How do we create content that users will care about and act on?”

Fortunately, one content strategist has the answer. Colleen Jones is the principal of the Atlanta-based firm, Content Science. Leveraging over a decade of experience, Colleen helps her clients figure out, first, how to prepare their digital content strategy and, second, how to make their content work for them. In other words, she helps her clients attain clout.

In her new book, Clout: The Art and Science of Content, Colleen shares her most sagacious advice in just over 200 pages. How she did it, I just don’t know. In this interview, I dig in deep: asking Colleen questions about her new book, her prior consulting experience, and what her forthcoming clout means for the future of Content Science. Read on to learn more about the author and find out how you could win a free copy of Clout!


Hey Colleen! Thanks so much for taking part in an interview for UX Booth readers. To start, could you tell us a bit about yourself, including your role as the owner of Content Science?
It’s a pleasure! I’ve been tackling content and UX challenges for 13 years, now. After long stints at Centers for Disease Control and Prevention (CDC) and Cingular Wireless, I began contracting on my own. In early 2010, I started Content Science. We work with many of the corporate headquarters, niche brands, and government agencies here. Atlanta has quite a few startups, too, and we advise them about the UX of their digital products.
That might sound like a very diverse background, but I’ve found the variety to be really, really helpful. I know what it’s like to be on the “client side” and have to live with content, technology, and design decisions for a long time, not just a project. I also have learned how to understand context, or the situation, quickly. I’ve worked on websites, IVRs, mobile devices, applications, kiosks, and just about anything interactive. And, I know first hand what it’s like to balance organizational goals, many stakeholders, and user needs. Throughout it all, I’ve made some mistakes and had some successes. So, I share my best lessons learned about content in Clout.
I imagine that writing an entire book about Clout was a very difficult process. Most notably because my experience with the web points to a meritocracy: the more positive work you do, be bigger your reputation – your clout – becomes. Yet this approach is, like most things of substance, easier said than done. How did you determine which characteristics inspire clout in today’s audiences and, more importantly, the crucial steps in which content novices could go about attaining it?
You’re right, it was difficult. I worked very hard to make the book easy to read but also meaningful and thought-provoking. I think people hear some confusing advice about influencing online. My goal was to end the confusion with advice grounded in solid principles. I included insights from my experience and principles of rhetoric as well as psychology. I also talked to persuasive design expert B.J. Fogg of Stanford University, who graciously let me reference his work on influencing behavior.
I think it’s interesting—and, at times, frustrating—that clout is not only about the positive work you do. As a simple example, you can create awesome content or an awesome product, but if no one knows about it, your organization will not achieve clout. So, awareness is very important. But, how do you make people aware of your awesome work without annoying them? It’s tough, but Clout offers principles to help.
And, in a survey I conducted early on about the book, I knew that readers wanted examples and case studies. So, I spent much time talking to people with all kinds of organizations such as Newell Rubbermaid, North Carolina State University, WhiteHouse.gov, Grasshopper, HowStuffWorks.com, and more to help show those crucial steps. The result is Clout has more than 150 examples and case studies.
Indeed, I found it difficult to put the book down! But, now, I’m curious: out of those 150 examples, what are the takeaways? What elements of content strategy constitute a “working knowledge” for today’s internet professionals? Creating any sufficiently complex website require close collaboration between a group of professionals. As a consequence, any particular team member needs to understand how their work relates to the website as a whole, including its content strategy. So what’s the foundation?
You make a great point about collaboration. I would say that three elements of content strategy are essential: analysis, editorial, and architecture. You need analysis to understand your content and your situation, or context. That’s what drives your strategy. Then, you need editorial to turn analysis into ideas, calendars, workflow, and quality content. You also need architecture to plan how your content is structured, how it’s displayed, and where it will be delivered, such as a website and mobile devices. Then, you need analysis again to decide whether you’re getting results. If not, then you need to adjust editorial and architecture.
Much of the advice you give in the book is especially valuable to those who are new to the web in terms of content creation. Did you write this book especially for these people (bloggers, content creators at startups, etc.)? Most beginners haven’t heard of a content audit or a style guide. I ask this question because – back when I lived in Atlanta and attended the local Blogger meetup – conversations about blogging inevitably tended towards what would otherwise be described as content strategy and clout.
Clout has layers, like an onion. If you’re new and want only basics, you can peel those off easily. For example, if you’re deciding whether to spend money on SEO tricks or better content, you’ll learn I think you should spend it on better content and why. If you’re more experienced and want to dig into deeper topics, you can. For example, the idea of WhiteHouse.gov as an influential media property raises some interesting questions about freedom of the press. The book mentions them but doesn’t make you analyze them in painful detail. I promise that Clout doesn’t make you cry like an onion can.
Also, Clout can help people who you might consider to be content experts, such as journalists or technical communicators. The book shows how their talents are needed in surprising new areas. In a way, I hope this book gives them some deserved career juice as content strategists.
Finally: now that your book is complete, what are your future plans for attaining and sharing clout with a broader audience? Writing this book certainly brings clout to your consultancy. Have you considered lending it to any of the ailing parties you mention in your book? For example: the ad industry or the health industry?
For the health industry, I just learned that CDC ordered Clout for training. That’s a very encouraging start.I’m hopeful for the advertising industry because many advertisers and publishers seem ready for a change. Those parties need to speak more, but I’ll help move the conversation forward. Also, Peter Merholz and Karen McGrane have sparked interesting discussion about how UX fits into all this. I added my two cents in a recent blog post.

For the technology, design, and marketing communities, I’m reaching out in 2011 more than I ever have. For example, Tim Jones of North Carolina State University and I are speaking at the O’Reilly Where 2.0 conference about content and location-based services (LBS). Most talk about LBS is social and technology, and we’re going to bring content into the discussion. Wish us luck!

Realistically, it will take more than a book—and many more people than me—to create lasting change in these industries. But, I’m doing all I can to be a catalyst and won’t stop anytime soon. I’m excited about the growing content strategy community around the world, too. It’s bustling with talent, ideas, and accomplishments. Count on hearing and seeing much more from this community in 2011!

Closing thoughts

Thanks again, Colleen, for taking the time to share your thoughts with our readers. If you’ve got questions for Colleen, feel free to ask them in the comments below!

About the book

Results. Everyone wants them, whether to sell more products, spread good ideas, or win more funding. In our busy digital world, the way to results is influencing people on the web. But how? An ad campaign won’t cut it. A Twitter account doesn’t guarantee it. Manipulative tricks will backfire. Instead, you need quality, compelling web content that attracts people and engages them for the long haul. Clout explains the key principles of influence and how to apply them to web content.

Don’t want to pay? How does free sound?

Holiday spending got you down? Well, consider this our present to you. If you’d like a free copy of Clout delivered to your home or office, you’re in luck! As it turns out, Peachpit has generously offered to give three books away to our readers. To enter for a chance to win, simply follow @uxbooth on twitter and leave a comment (with your twitter handle) below describing what you’ll do to earn Clout in the new year. We’ll randomly draw three members within a week of this post and contact you over Twitter. See you in the comments!

About our Guest

Colleen Jones

A veteran of the interactive industry, Colleen has guided or supported strategic initiatives for global brands, government agencies, boutique brands, and savvy startups. She has presented about content strategy, user experience, and interactive marketing around the world. Colleen is Principal of Content Science, a content strategy and UX consultancy and can be found at @leenjones on Twitter.

November 30 2010

21:00

Modern Element Trends in Magazine-Styled Webdeign of 2010

Magazine-style-website-designMany web designers today are moving away from the traditional layout of a website. One of the layouts that are in trend today is magazine or news style of website. Magazine-styled website offer good usability, clean typography, and professional interface. Adding on to that is that even if you put many elements on a page, it will still look organized and not overcrowded. Usually, magazine style is used for online periodicals, lifestyle, and fashion websites.

Common Features of a Magazine-styled Website

Generally, these are the things you will see on a magazine-styled website.

1. Horizontal Navigation

It is common on any website to have a horizontal navigation, and that also goes with magazine-styled websites.

Horizontal navigation limits the space used because navigations always go from left to right. Also, you don’t have to scroll down to find the last navigation. Adding on to that is the easy to understand drop down sub menus.

As I am searching for magazine-styled websites, I have seen one website with vertical navigation.

The good thing about vertical navigation is you can group sub categories without using a drop down menu. But, seldom web designers use vertical navigations for users quickly notice the menus if they are put at the top, horizontally.

2. Drop Down for Sub Menus

Since there are various menus and sub menus for a magazine-styled website, drop down menus make it easier for visitors to find what they are looking for.

Take a look at the website Slate. Instead of using sub menus under the main menus, you will see the articles listed on that menu.

3. Categories

Because magazine-styled websites have lots of contents, most of the articles are categorized to let visitors find what they are searching for based on categories.

4. Search Bar

The same goes with Search Bar. Websites with magazine style of layout have many contents to put on, and that is why most of them have search bars. In this case, visitors can find the specific topics they are searching for easily and quickly.

5. Popular News/Stories Section

Articles listed on the Popular News or Stories section are the most read by visitors of a website. Listing these kinds of articles is a great way to inform your readers on which are the most clicked.

6. Latest News/Headlines

With many contents posted on websites, putting Latest News or Headlines section on a website is recommended. This informs visitors and users on what the newly published articles on the website are.

Look at this website, not only that headlines are listed, there is also a mark saying “Most Read” for the most clicked link in an article. This informs users which are the popular ones.

7. Images and Videos

Putting images and videos on your website is one way to capture the attention of your visitors. Images are one way of letting your visitors understand the message you convey. And based on research, people like to view images rather than reading pure texts only.

Videos have become more common for online websites today, especially with online news sites. If viewers missed something on TV, they can watch it online. And instead of reading what seems boring to some viewers, they can just watch a video relating to that article.

8. Light-colored Background

Magazine-styled websites have light-colored background and the commonly used color is white. Light-colored background is better for it makes the content readable.

9. Columned or Grid-based Contents

Like what we see on magazines, contents are grouped into columns or sometimes into grids. The same goes with magazine-styled websites, grids are effective to use for they keep the contents well-spaced and noticeable.

10. Clean Typography

For magazine-styled websites, it is important to consider the typography for it puts a lot of content on a page.

Take a look at The New Yorker website. Even though it has a lot of content on its homepage, it still looks organized because of the neat-looking typography, grid-based contents and also the white background it has.

In this article, I collected different kinds of well-designed websites with magazine style. I hope you will be inspired like how I was with this compilation.

1. Azure

2. InStyle

Instyle

3. InStyle UK

InstyleUK

4. Giant Magazine

5. People

People

6. UGS Magazine

Ugsmag

7. Clutch Magazine

Clutch

8. Typographica

Typographica

9. Vogue

Vogue

10. Dazed Digital

11. WWD

Wwd

12. Justine Timberlake Website

Justin

13. GQ Magazine

Gqmag

14. Macalicious

15. Vanity Fair

Vanityfair

16. Spin

Spin

17. WMagazine

Wmagazine

18. Rua De Baixo

19. Black Book

Blackbook

20. NFL UK

Nfluk

21. Wired News

Wired

22. Zaum & Brown Website

Zaumandbrown

23. Details

Details

24. More

More

25. UX Magazine

Uxmag

26. New York Magazine

Newyorkmag

27. One Nation Magazine

OneNation

28. Frieze

Frieze

29. INC

Inc

30. San Francisco

Sanfrancisco

31. Creative & Live

Creativeandlive

32. IndiePit

Indiepit

33. Portfolio

Portfolio

34. BMI Voyager

Voyager

35. TIME

Time

36. The Christian Science Monitor

Christiansciencemonitor

37. CNN

Cnn

38. BBC

Bbc

39. Economist

Economist

40. FILE Magazine

Filemagazine

Before I finish, let me give you some advantages of a website with magazine style of layout.

Advantages of Magazine-styled Layout

1. It gives a professional look of a website.

A light-colored background with a clean typography where contents are put into columns or grids are some of the ingredients to make a website look professional.

2. Good choice of style for websites with a lot of contents to put on.

With a magazine-styled website, you can put several contents on a page without cluttering them.

3. It is easier and quicker to search for topics.

It is easier and quicker for users to search a certain topic for they are categorized. For instance, most read articles are found on the Most Popular section. While, newly posted articles are to be found on the Latest News or Headlines section.

To be fair, let me also give you the disadvantages of a magazine-styled layout.

Disadvantages of Magazine-styled Layout

1. Confusion on what to click.

Viewers might be confused on what to click because many things are posted on a page.

2. Contents may look cluttered or disorganized.

If magazine-styled website is not well designed, contents may look cluttered or disorganized. To help you with this, always stick on a light-colored background, columned or grid-based contents and clean looking typography.

3. More maintenance and updates.

A magazine-styled website entails more maintenance and updates on the part of the web administrator. But it still depends on how often the website is updated. The more articles published, the more work for the administrator.

Share your Thoughts

What about you? What do you think about magazine-styled websites? Let us know your thoughts on the Comment section.

May 10 2010

21:00

Medical Websites in the Realm of Modern Design Trends

With design and development technologies evolving quickly it’s hard to imagine that some of the companies still have the websites designed in late 90’s or early 2000’s and do not think of creating something new and attractive. For some time and rarely meeting such oldie websites online I had no idea that the whole industry could still be keeping to the old design and development formats that’s the medical centers and hospitals websites. There are hundreds of beautiful website showcases presented online but I have never seen any related to medical websites and so decided to give it a try.

I have browsed through all CSS galleries with zero results, made a search in Google for medical centers and even checked Google keyword suggestion tool for all the possible keywords people use to find hospitals and medical centers online… and it’s really desperate! Overall I have checked over 500 websites and just a few had a hint of modern design and the idea of the inspirational showcase post went into oblivion :)

Still, I think this article will be useful for any designer working on the medical project as I’m going to analyze the structure of the websites, the important home page elements, the menu and other design aspects.

At the end you will find a showcase of 24 non standard medical websites that can help you start with your own design as well as help medical centers to plan a scheme for a successful user-friendly medical website.

First of all let’s look into disadvantages of the old style designs for the medical center website:

1. Small website width and as a result:

  • No place for important info of the website home page;
  • The info is presented in a not efficient manner, the pages look cluttered;
  • The necessity to create multiple inside pages;
  • The feeling like you’re in the 90’s;
  • Loosing clients who don’t want to dive deep into the content but look for quick info on the home page before going into details.

2. Usage of small fonts and as a result:

  • Visitor non- friendliness;
  • The inability to browser through the website pages for aged people;
  • Less accent on important information.

3. Non professional/small/cut photos and images

I’m not sure if that’s really me who got used to modern creative websites, large spaces and easy access to information, but I think that the old-style websites are simply inconvenient to use. Let’s analyze what the key-points of successful medical website are and what elements I’d expect on the website home page as a regular user looking for some services or advice.

1. Something telling me not to panic.

The relaxing light color scheme and some phrase in the header saying they can help no matter what. Small flash animation showing the photos of nurses, surgeons, doctors with convincing calming phrases would be perfect.

2.Search area.

Search area is vital. That means easy access to the needed information.

3. Testimonials area.

I feel a bit scared and desperate and I want to know what others say. In other words I need someone to calm me down and tell that everything is gonna be okay.

4. A big obvious button to Request an Appointment.

Well that’s exactly the reason why I have finally come to the website of the medical center. I want to request an appointment and I’d be grateful if you could point me to the right direction right away. Comparing to other websites that’s the same calls to action, they should be big enough and obvious.

5. Phone number.

The phone number should be in big letters somewhere on top right area. If that’s an emergency I’ll definitely would like to make a call.

6. Quick links.

Quick links to women’s health, physical health, healthy living or to frequently requested patient and visitor information.

7. Big multilevel menu on top.

Big multilevel menu on top giving access to all the sections possible. This is probably one of the website types when the larger number of sub menus can’t hurt. It’s simple, if you know nothing about medicine or doctors you won’t be able to find anything on the medical website without these multiple helping links.

8. Community engagement.

Link to forum, blog or some knowledge center. People are social creatures yet afraid of doctors and all of us would probably study all the possible literature and cases before visiting the doctors. Here’s when the forum with the doctor advice would be real handy.

Making this small analysis and comparing multiple old style and more up-to-date websites I have come to conclusion that this ancient websites suck not because I miss all the modern cool elements, big buttons or cute boxes, but mostly because there’s simply no place for the information that visitors were seeking for and expected to see.

Thus, building a website for a medical center or hospital keep in mind that space is really important. Think about people who would visit the website, about their behavior and psychology, talk to your friends, parents and grand parents as in this case that might be more helpful than your 10 years of website design experience.

Below is a collection of 24 medical websites that truly stand out from the crowd. They are both for website planning and design inspiration and I’d be happy to see a website created by you or your company in this list in the near future. Stay tuned and good luck!

24 Really Nice & Non-Standard Medical Center Websites

1. Doctorsofusc

2. University of Illinois Medical Center

3. MedHelp

4. Flag Staff Medical Center

5. Concentra

6. CSMC

7. LexMed

8. BMC

9. HolyreDeemer

10. Health Angle

11. GapMedics

12. lrmc

13. Tgmc

14. Shs-Nutrition



15. Med.Cornell

16. Intermountain Healthcare

17.Jefferson Hospital

18. Clevel And Clinic

19. Mobridge Hospital

20. Valley Med

21. Mountnittany

22. Kumed

23. Childrens

24. Seattle Childrens


Don’t forget to share your feed back via comments section.:)

10:00

Case Study: Call to Action in Web Design Usability

I’ve recently been working on a new website for a very large organization. The organization is made up of numerous policy teams who are all tasked with keeping different topics of interest up to date. The one downfall of this is that each policy team considers their content to be the most important. This has led to every new section being given to us with the instruction of “making it more prominent”.

We keep informing them every time we make something ‘more prominent’ we are taking prominence from the previously highlighted sections, effectively making nothing stand out. While researching the topic, to formulate an evidence based repost for our client, I discovered numerous reasons why it’s essential to distil your calls to action down to only the core outcomes you want from your audience.

Look at me!

Be wary of causing choice paralysis

“…we think, if we provide (users) with 200 brands of peanut butter, they are more likely to find a brand that suits their taste. Schwatz cites surveys done in supermarkets that showed the reverse. When customers were presented with a huge selection of brands of a certain item, fewer customers bought the item than when fewer brands were displayed.”

Christopher Heng

Choice paralysis occurs when users are supplied with too many similar choices. The abundance of choice leaves consumers confused as to which option to take. They end up not making a choice at all, in fear of making the wrong decision.

Your calls to action should have clearly distinct outcomes

“…it is not so much the number of actions as the distinctiveness of each.”

Paul Boag

If you need to provide your users with more than one call to action on a page, try to ensure that your users understand the difference between them. For example, having one call to action labeled ‘Sign-up’ and another labeled ‘Register’ would make it very difficult for any users to decipher which option they should take. If both calls to action seem to lead to the same outcome the likelihood of confusion increases.

We don’t read pages, we scan them

“One of the very well-documented facts about Web use is that people tend to spend very little time reading most Web pages. Instead, we scan (or skim) them, looking for words or phrases that catch our eye.

Steve Krug (Don’t make me think)

If users read everything on a Web page in the order they are displayed, numerous calls to action wouldn’t be as much of a problem. The individual would read the supporting paragraph, decide they want to read more about that and hit the corresponding link.

However, as Steve Krug describes, “we scan (or skim) them, looking for words or phrases that catch our eye”, which means it is unlikely that your users are going to read the accompanying paragraphs and will instead choose where to go next by the text within the call to action. The more call to actions they have to scan through, the higher the chances they will choose the wrong one.

There are only so many ways to make something stand out

Every time our client asks us to make something ‘stand out’ on a page they don’t seem to grasp our warnings that this will dilute previous calls to action. I think the reason for this is because they are used to seeing the page in its previous state and therefore have become desensitized to the previous calls to action. So when we add another one this stands out, to them, far more than any others.

However, a new viewer of that page has no previous experience with it and therefore everything is new to them and therefore fighting for their attention.

There are only a few different design techniques that can be used to make something stand out; contrast, white space, size, positioning etc. With this in mind, when you have numerous calls to action on a page it is very unlikely that any of them will stand out more than others.

More choice leads to greater dismay because expectations are raised

“When people have more choices, they expect more, because they expect that they will be able to choose the exact item that meets their needs perfectly.”

Christopher Heng

Our client’s homepage consists of a number of pods, with each pod representing a different segment of their target audience. We tried to create broad pods, to ensure that everyone who visits the site instantly notices a section that could potentially be for them. However, our client wanted to present some very specific roles along with our broader suggestions.

This presented the problem that a visitor to the site could see these more specific options and believe that there would be a specific role for them, thus raising their expectations. When they discover that their specific area hasn’t been represented, they could wrongly decide that this site doesn’t have what they are looking for.

However, if we were able to keep the number of pods to a minimum, users would be more likely to want to explore a section that could possibly relate to them.

To conclude

When thinking about the possible calls to action on your site, be sure to ask yourself exactly why every call to action needs to be there. More calls to action lead to a more complicated interface and could possibly lead to more dissatisfaction.

Try to highlight only the most important actions on your site, otherwise you could risk none of your calls to action being noticed. Finally, I thought I’d leave you with an excellent example of a focused call to action.

The guys at 280 slides have decided they want their users to try a demo of their product and so this is the only call to action on the homepage. They could easily have given numerous options to their users increasing the cognitive load, however they have done a great job of focusing their audience on the task they think is most important to them.

280 Slides screenshot

Related reading

The Paralysis of Choice and How to Improve Sales and Customer Satisfaction

Call to Action Buttons: Examples and Best Practices

10 techniques for an effective ‘call to action’

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...