Elements of a good web app/site design


4

I am trying to summarize elements of a good web application and web site design. This question was asked earlier in various forms and my intent is get some must haves, good practices and definitely avoid kind of items.

I have come across a good document from adaptive path on Patterns for Signup and Rampup and I like it.

Welcome all input and references.

User Interface

asked Dec 16 '09 at 23:07
Blank
Aka Ak
165 points
  • I have come across this site patterntap.com that I find useful to find various design patterns. – Aka Ak 10 years ago

6 Answers


7

One of my favorite books on this subject is called Don't Make Me Think, by Steve Krug. I highly recommend it. It's full of practical examples of little things that can make a big difference in your site's usability.

answered Dec 17 '09 at 00:51
Blank
Michael Trafton
3,141 points
  • When designing or updating a site, I ALWAYS refer to "Don't Make Me Think" to ensure I have not induced any UI blunders. It is an amazing, colorful, simple, and effective book. I too, highly recommend it. – Clint 10 years ago
  • +1, Steve Krug is genius, especially the in-house usability tests. Also he just came out with a new book (though I haven't seen that one myself). – Jason 10 years ago
  • ++ for Steve Krug. Startups, especially, need to be good at the UI and UX. – Aka Ak 10 years ago
  • One of my favorite books on site design too! – Gary E 9 years ago

4

One thing that I can think of is: don't force users to register until the last possible moment.

Also, you might be interested in common UI design patterns.

answered Dec 17 '09 at 00:43
Blank
Olivier Lalonde
2,753 points
  • This is a great resource. Thanks. It is amazing to see that the whole site is managed by one person. – Aka Ak 10 years ago

4

In general, I believe, a "good" design is one that supports the purpose of the web site. Thus, there's no general answer. It simply depends on the purpose.

However, there are some elements that every web page has or should have in one form or another:

Call To Action The most importent element. You want your users to do something, so you must tell them what to do. What it is depends on your web site or product. There may be several calls-to-action, and a series of them is often called a (sales) funnel.

In general, the less steps necessary to complete an action, the better.

Interactive elements Everything that enables the visitor to do something: Forms, buttons and other widgets. Their purpose should be obvious.

Copy This is used to describe the benefit or utility of the product, establish a certain emotional mood, provide information about your product, and -- most importantly -- answer ANY objection visitors may have NOT to act on the call-of-action.

The most common objection is risk-awareness or uncertainty: Will following the call-to-action really provide the promised benefit? Typical solutions include guarantees, testimonials, free trials, etc.

Headlines There are basically two camps with different ideas what headlines should do. The first ones assumes the purpose of headlines is to describe the product and/or its main selling point. The second camp assumes their purpose is to make the visitor read the first sentence of the copy. These are not mutually exclusive, so one may find a headline which does both, sort of.

Depending on the camp, sub-headlines are then either used to structure the copy or to provide additional entry points to read the copy, respectively.

Graphic design Often over-emphasized, but sometimes useful. It includes logos, CSS design, images and video. Graphics is good to improve recall or recognition, to establish an emotional mood or atmosphere, and to add credibility.

Sometimes, it's also used to suggest additional benefits that are either hard to describe in the copy, or that you don't want to describe, at all. (Think, for example, the fetching girl in a car ad).

Graphic is also relevant when leading the visitor's attention, thus graphics should emphasize the important elements, usually the calls-to-action and the headlines.

On top of my head, that's it. Basically.

Hope this helps.

answered Dec 17 '09 at 01:34
Blank
Claus Schwarm
1,599 points
  • Well said. Weather web app or mktg site it is important to keep the _call to action_ in mind at page and app/site level. Call to action and the graphic design is where majority of the newer sites (web 2.0 sites) seem to fare well compared to older sites. There are certain things that small businesses like drop.io, helpspot.com, getharvest.com are doing very well with their value proposition. Certainly some business are doing excellent with their marketing site and web applicaitons. – Aka Ak 10 years ago

2

37signals book Getting Real is a good read. Free online or you can buy a hard copy.

answered Dec 17 '09 at 04:19
Blank
Jason
16,231 points

0

The site should offer good user experience, good search function, easy to navigate, easy to find what you want, has a site map, simple forms, good error message displays, loads fast, has good SEO practices, easy on the eye, text can be resized, color do not clash and burn your eyes, call to action clearly visible on the home page, easy to find contact information, always up, validate on the client, good use of Ajax to make experience like a desktop app, terms of service and privacy clauses, doesn't ask for unnecessary information from user, still works when Javascript is disabled, displays and functions properly in all popular browsers, html/css validate properly, ... etc.

answered Dec 24 '09 at 06:26
Blank
Abdu
384 points

0

A good website and a pretty website are 2 completely different things. I am going to assume want to talk about a good website because ultimately looks aren't the deciding factor when someone uses a website (craigslist for example).

KISS principle - Keep it simple stupid. I live by that.

If you make me think about how to do something, you have failed in producing a good user experience. I should just know where to find things the first time I use your site without you having to give me a tutorial. You must also provide me the shortest amount of steps to complete a task. The fewer amount of clicks I need to finish a task the better.

Also, don't bombard me with tonnes of information at the same time. I am not going to look at 98% of that information. A good example to WAY to much information is the NYTimes website - http://www.nytimes.com/. It scares the user because they don't know what to do next. Don't provide to many options, tell them you want to do A, B or C and not A - Z. The more options you give the user the more you reduce each options (as Claus said) "call to action". They might even end up leaving.

Good luck!
Matt

answered Dec 17 '09 at 12:23
Blank
Espinet
221 points
  • Good and pretty are definitely two different things. But, they do not have to be mutually exclusive. Imo, the distinction between good and pretty can be put this way: good - relates to UX and simplicity; pretty - relates to UI, graphic design to make the good work for the audience. I did not quite get your example of NYT website. When it comes to NYT I am little biased as I think that they do the best in their domain/industry. – Aka Ak 10 years ago
  • I cant really explain it easily through typing, but basically theres to much going on on their home page. Just did a count on their home pages html source code and there are 323 clickable links. If a person does not know what they are looking for, this certainly doesn't help. People usually don't handle information overload to kindly. – Espinet 10 years ago

Your Answer

  • Bold
  • Italic
  • • Bullets
  • 1. Numbers
  • Quote
Not the answer you're looking for? Ask your own question or browse other questions in these topics:

User Interface