Effective Design (for the web)

What makes one design better than the other? Often it comes down to brilliant insight or genious innovation. But more often the framework is a well thought out design, based on a formulae with ingredients of proven design process method and an eye for detail.

Though these are numbered, they are not strictly to be considered as chronological steps.

0. User-centered design

Define the target audience (their behaviours,expecations,motivations).

Define user goals (task analysis) and business goals (strategy).
Define the context of use (activity,workflow), culture and environment.
User modeling, personas and scenarios (optional).

Study or research the current situation before envisioning the future situation. Look how the site is currently implemented/designed (and if relevant how known and unknown competitors tackle similar design challenges) – how much of this can be copied? how much of this can be improved? how much room is there in the project scope for novel features?

1. Workflow, process, methods and techniques

What process or workflow you follow, which design methods you apply.

Methods and techniques are useful and it’s important you know how to apply a couple, even if you are a UX team of one. However…read the “However” section at the end of this post. It states that it matters not which specific methods you use, but that you have used one at least. For example, as Dan Saffer wrote, if you want to brainstorm, it doesn’t matter if you do competitive analysis or do a word association game. Whatever gets the brain warmed up for that domain/audience. Even going walking and thinking about an idea or problem by yourself, can be sufficient for you to know what to do and move on.

One thing that all designers must do is iterate, no matter.

Iterative design means design, get feedback, adjust design, test design, etc, in a finite number of cycles

Iterative design means starting with a single solution, use it and build on it, approach it from different angles (different hats), solve part-problems (deelproblemen), slowly add more detail as you are relatively comfortable with a part of the product.

You have to zoom in (to details) and zoom out (to the big picture). Does it feel right on all levels? Are you still working towards and reaching the main goal/objective? Start with a concept, apply high-level information hierarchy (blocks/modules in the high-level wireframe), collect inspiration all around you, fill in the details. Do this in any order. See next point.

2. Design alternatives

– First, describe the problem (seperate from the solution). What is the root cause of the problem? Can it be eliminated or the feature simply removed? Could you turn the problem into an opportunity?

– Task analysis, define the root problem space and break down the tasks  (optional)

– Brainstorm about solutions and alternatives.  Roughly sketch, write down keywords

– Roughly analyse the solutions.  What are the pro’s and cons of each solution? Can you combine the pro’s of several solutions into one hybrid solution? Do before/after analysis: is the redesign a real improvement or perhaps a step in the right direction? Do you need to dive into patterns,  research or previous discussion to reach a conclusion?

– Decide! Make your choice of solution, then stick to it, go along with it. See how far you get with it, and if you get really stuck, then go back to low-level and try another solution.

– Iterate! Don’t get stuck in too much detail too early now. See the next point.

– Sleep on it

3. Wear different hats

Levels, perspectives, views. Will all stakeholders appreciate the solution? Is there a good balance between meeting user’s and business’ goals? If there’s a hierarchy (or pyramid) of stakeholder needs, what comes first? What are the critical design criteria for success? Is it the one that delivers most ROI?

Be the user. Be the marketing department. Be the client. Be your boss. See your design from within all these people’s shoes, through all their glasses or lenses.

4. Apply the laws/principles of succesful interaction design

Every solution must adhere to basics, laws and principles of good interaction design.

– Consistency, simplicity (save time), …  See other blog post   (+ add Prominence and layout/gestalt principles)

Furthermore, every solution must adhere to laws beyond interaction design: UX design. This comprises of sub-laws in the fields of:
-Graphic/visual design principles
… related posts: Information hierarchy,
-Information design principles
-Copy writing

Aesthetic design principles: universal principles of design (book) and other post [Patch Manager client]

Brand concious. Does it fit the company’s image or brand?

Convention. Don’t re-invent the wheel. People will often be more comfortable using what is known, rather than spending time on learning the unknown. Use common GUI elements, unless the reason to break convention. Don’t just copy the awarded site or trend or say ‘that’s how Amazon do it’. You’re not Amazon, you have a different sites, a different audience, different products. And even Amazon get it wrong at times. Trends are only temporary. Look beyond.
Copywriting. It’s all about legibility, readability and good writing. The user wants to be able to read and understand comfortably, with ease. Good copy sells. Write for your audience

Usability. With knowledge of usability research (what works and what doesn’t, what works best) your design can go a long way on being effective in terms of user performance. However, you’re not designing a cockpit, but a pleasurable experience. It’s not only about what is the fastest typeface to read in, but also if one feels happy reading it. Only then is it truly user-friendly. Be cautious with research, surveys/statistics, etc – they may be deceiving, or only tell part of the story.
User experience. Imagine your product/design as a (friendly and useful) person.

  • Who will use this, when and how? How could they fail or misinterpret?
  • How does the end-result affect your feelings or emotions?
  • Are first impressions (good looks) more important than inner value?
  • Do I want to use this again and again? Will this make me want to come back (returning visitors)?
  • Does it motivate or stimulate me enough? gamification, onboarding, sticky content (retention/return visit)
  • Is it adhering to my behaviour, expectations and motivations? personas
  • How important are the positive criteria and elimination of negative criteria as business criteria or critical success criteria for the product. How important is: innovation, trust, brand conciousness, pleasure, desirability, usefulness, effectiveness, cost, durability, aesthetics, security, degree of feature richness, usability, performance (system responsiveness), timing, scalability (modular), reliability, interoperability (e.g. supported browsers) in me using this product/design?
  • Helpful/support/chatbot/buggy
  • How will the design change the perception of the company?
  • Does it tell a good story and encourage word of mouth recommendation to leads?
  • Does it encourage exploration and play (but users can still feel safe and what I’m proposing can be undone)?
  • Is the solution elegant and appropriate? (unlike the talking paperclip in Word)
  • Does it take too much of the user’s time? Is it ergonomic?
  • How important (and thus prominent) should this be?
  • Is it smart and useful enough, or should it do more in a more intelligent fashion?
  • Does it accomodate sufficient personalisation (over time)?

* Attractiveness. Social/status: do I do good using this product, or do I not want to be seen dead using this? Universal principles of design (golden ratio, law of thirds, proper use of whitespace, Gestalt principles, etc)

Scalability. Does the design work if more content is added (or removed) in the long-run? What are the limits and constraints that the design impose (you don’t have to design them but at least consider them).

Information architecture. Navigation, call to action (conversion), exploration/discoverability, waypoints, look up, where am/was I?, where can I go?, information scent.

-Technical feasibility. Is it possible within reasoble time/cost? Cost-benefit benefit, the benefits being the ROI.

5. Check your design

Defensive design (error prevention, adequate support/help and input forgiveness).

For more, see heuristic (evaluation) and apply ‘best practice’ (with a grain of salt).

Get someone else to look at it (Expert review) to quick fix low-hanging fruit.

Hallway testing.

6. Test your design

If you are still not sure if design A or B will work better, usability testing will give you qualitive feedback and can be combined with quantitive feedback via A/B (multivariate) testing. Are your users and business measurably more satisfied after the change?

Budget, informal testing. Guerilla usability testing.


In Journey to the center of design , Jared Spool (SXSWi 2009) claims successful companies are those that don’t follow UCD rigorously, do challenge the dogma of process (don’t blindly follow  methodologies, eye-tracking, analytics, or even usability testing). Instead, they apply tricks (he defines tricks as …) and  INFORMED design. Making informed design is making informed decisions, everything in the process (in our tools and techniques) is about getting info in the design process (before development). He also found that you can determine if a design company or team is  successful by asking 3 questions, or 3 core UX attributes or ingredients of successful companies/teams:

1. Good vision – can everyone on the team describe what the experience of your design five years from now? any babysteps should take you closer to success, not further
2. Good feedback loop – have you seen people use your design, every 6 weeks everyone on the team should have this experience .
3. Great culture – in the last weeks have you promoted a team member for creating a major design failure? culture should celebrate making mistakes, we learn from mistakes, accepts mistakes, if everything has to be perfect you end up making drack. (see also post about champagne)

Suggested methods: usability lab? ethnography (fly on the wall)? Talking to customers. Don’t get hung up on typical UCD methods. Instead get creative about answering the question your trying to solve. What would McGyver do? Determine the best method for the challenge: usability testing, 5-second test, card sorting, field research, interviews, surveys, A/B or MVT, divide the dollar.  (from http://www.slideshare.net/jacksonfox/closing-the-feedback-loop-with-a-little-help-from-your-friends


One Response to Effective Design (for the web)

  1. […] also my posts about basic, laws and principles of effective interaction design for the web. Possibly related posts: (automatically generated)Rapid Prototyping ToolsAn agile approach to […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: