Page Design For Startups

Picture of Ankur Sharda
Ankur Sharda

Ankur Sharda continues his series on simple advice for startups. This time it’s Page Design.

The beauty of a web page is that it’s so simple to use. However if you’re coming from a non-web background and trying to build a startup, you may have found, designing a page is a bit more involved than you first imagined.

There are so many choices to make, and doing one thing often means not doing another. Getting these decisions right or at least not completely wrong, is an important part of your overall puzzle. Here are a few ideas to help with getting started.

How to start thinking about design

Your web page is just a medium of communication. Long before the web there were other forms of communication, and people had already been thinking about what worked and what didn’t.
The world of copywriting has been using the AIDA formula for years, and since the web is much like a magazine or newspaper in digital form, it’s probably a good place to start.

A is for Attention

The A in AIDA is for attention. The first thing any page should do is grab the user’s attention. Doesn’t really matter how, just do it. In the old print world of newspapers and magazines, this was often done with a headline. On the web a similar result is achieved with a prominent image or statement. If you look at basecamp.com they use a distinctive image while others like atlassian.com use a catchy statement. Either way your user is now ready for more.

I is for Interest

Once you have the user, you need to keep them hooked. This is where you start providing a taste of what you’re offering. How you do this will depend on what your site does. You might provide some explanation about the benfits of your service, a video showing it in action or if you’re a content website like pinterest.com or amazon.com you’ll show the user some featured items. You need that starts providing some detail about the value you offer and let’s the user ‘fill out’ a mental checkbox that says, “tell me more”. For example if you have a look at www.tuggle.com.au I’ve focused on this by immediately showing some items near the user, hopefully making it obvious what the website does and letting the user decide if they want some more.

D is for Decision

Now you want your user to get ready to act. They came in not knowing what to expect, and so far you’ve succeeded getting them comfortable with what you do. Now you need to get the user ready for the next stage. How you do this depends on what you’re asking for.

The easiest way to move the user through the funnel is to 1) not ask for too much 2) give the user confidence in the result. This second point is why late night television ads use customer testimonials so excessively, and one of the reasons hotel booking sites keep telling you how many people booked in the last minute/hour/day.

Another tack is to offer a 30 day free trial for your SAAS business or free premium shipping on the first order for an ecommerce business. Overall what you’re trying to do is deflect any objections that the user has towards finally performing the action that you want.

Somehow you need to get the user from, “hmmm that’s interesting”, to “ok I’m in”.

A is for Action

Once a user has decided they’re ready to start searching, browsing, signup or make a purchase, the final piece of the puzzle is to make performing that action easy. Your buttons, search boxes or whatever it is that lets the user signup, search or start browsing, need to be big, prominent and obvious so your user isn’t left wondering how to proceed.


basecamp-aida-fppap-analysis
A technical page analysis of the popular basecamp.com website

Converting your thinking into design

The AIDA formula is has been tried and tested by experts over many decades so you can trust that there’s some weight behind it. What comes next is purely a figment of my imagination so please enjoy responsibly 😉

Once you’ve thought through the high level issues with the AIDA formula, it’s time to start placing page elements together to form a page.

Focal point, focal path, action point.

In my opinion there are three things every page must have.

A focal point – this is the first thing that draws the user’s eye and there should only be one obvious ‘thing’. Having multiple ‘things’ that draw the user’s attention will confuse the user and muddle their attention. Every time you do that there’s a chance they will leave.
Focal path – this is a series of straight lines that lead from the focal path to the action point. If the lines are not perpendicular or it’s not super clear where they are, it may be time to have another go.
Action point – this corresponds to the action in the AIDA formula. This is a clear area on the page where you expect the user to take some action


shoesofprey-aida-fppap-analysis
A technical page analysis of the famous shoesofprey.com website

Some basic tips

Put them into quadrants

Different parts of the page have a different purpose to play. If we divide the page into four quadrants/quarters, we’ll be able to start discussing what should go where.

Top left
The top left quadrant is crucial because somewhere in there is the natural focal point for the web. When a person first looks at the screen they don’t look at the middle but somewhere between the centre and the top left corner. This is where you want your focal point to be, which corresponds to your “Attention”. Every single successful web company in the world does this. Just type in a few famous companies URLs, you’ll see what I mean.

Bottom right
As a result of years of training, turning book pages and these days more likely clicking the scrollbar to scroll down, users brains are hard-wired to click things that appear lower and to the right. Hence your action point usually goes in the bottom right quadrant.

Tying it together
The hard part is connecting your focal point and you action point. If a user’s eye is immediately drawn to the focal point and there is a clearly identifiable action point, the final piece of the puzzle is to have them connect.

What you want to do is have a clear focal path or line that joins the two. This line doesn’t have to be straight. It can be a series of connected horizontal and vertical lines that start at the focal point and end at the action point. It’s ok if there is a secondary points of interest, as long as there’s one clear combination of focal point which is connected to an action point by a focal path.

If you’re an expert designer much of what comes above may be trivial, and chances are you’ll be confident about breaking many of the rules. But if you’re not knew to designing page layouts, then hopefully it provides you a good starting point. Next are a few quick tips to keep in mind.

  • Visual hierarchy Don’t make everything the same size. Make important things bigger, bolder and higher on the page, and demote less important ones. This ties in to the idea of having a focal path → action point.
  • Alignment I once read a book called The Non-designers Design Book. It was full of useful information, in particular was a rule about alignment. Simply put, you need to make sure each “thing” aligns with some other thing. For example if you look at the current shopify.com website, you’ll see that the headline “Shopify is everything you need to sell anywhere”, the words is and sell are different colors but on the desktop version they align precisely. I would suggest this is not an accident, if they didn’t line up it just would look as ‘good’. Moral of the story, line things up, it just looks better.
  • Put away non-essential nav links Your ‘About Us’, ‘Media’, ‘Our Story’ and other such links should go in your footer navigation, not your header navigation, unless you’ve got a really good reason to do so. Only put things related to the your websites core purpose in your header navigation.
  • Make clickable things look clickable If you want people to click on something, make it look like it should be clicked on (corollary: don’t make non-clicky things look clickable).People are used to seeing links being in blue and buttons looking a certain way. If you want to be fancy and change these defaults, be very sure that it adds to the overall usability of the site, and isn’t just because you think it looks a little better.

and finally ….

Copy, copy, copy with a complete and utter lack of shame
You’ve heard that good artists copy and great ones steal. Be an artist.

On the web copying your competition isn’t just acceptable, it’s best practice. Jakob Nielsen made the point in the late 90s/early 2000s that most of the time your users are on “other websites”. Hence their ideas of how the web works is formed by using other websites. In particular the big famous ones like google, facebook, amazon etc. so don’t try to reinvent the the user experience. If the ‘big kids’ have a way to doing something, copy it, or you’ll confuse your users and they’ll leave.

P.S. I highly recommend reading as much of Jakob Nielsen’s writing as you can nngroup.com/articles

Ankur is busy building tuggle.com.au and can be contacted via twitter @shardinator

Share this post :

LinkedIn
Twitter
Facebook
Picture of Ankur Sharda

Ankur Sharda

Web, data, startups ... semi-nomadic
Latest News

Become a Startup Insider

Get the latest startup news, tips, and inspiration in your inbox each week.