What is interaction design? How to create good interaction web design.

This article was written by in July 10, 2014, & may not be posted on other sites!
Original source url for this article: What is interaction design? How to create good interaction web design.

What is interaction design? How to create good interaction web design.
To create a truly successful website you need to pay attention to the interaction design. But what is interaction design, and how can you improve the interaction on your website? Here are all the answers:


What is interaction design?

Interaction design is basically the interaction between user and machine, how the human interacts with a website for example. A webshop, a forum/community or any kind of online tools are all good examples of the interactivity between human and machine.

Good interaction design is intuitive, dynamic and effortless. The user shouldn’t have to think at all, that’s our goal!

What is interaction design? How to create good interaction web design tutorial

How can I improve the interaction design on my website?

No matter what content or service your website is offering, you should always provide the best interaction design possible. Make the website user friendly to improve visitor experience, keep visitors to stay longer and even return. Here are som guidelines on good interaction design:

Web structure & architecture

  • Start with a basic wireframe to plan the content, strucure and workflow of your website.
  • Use as few steps as possible on all workflows and operations.
  • Make the content avalable and easy accessible to all users.
  • Scale down the content to a minimum, specially text. Less is definitely more on the web.

Navigation, links and buttons

  • Use a maximum of 7-9 links in the main navigation, less is better! Use nested submenus or a secondary menu if necessary.
  • Make buttons clearly look like clickable buttons not to confuse visitors. Use relevant text on the buttons to clarify the action.
  • Make links clearly look like links.
  • Style links with an active and visited state to give the user feedback.
  • Use relevant link text, “more” might become more user friendly as “read full article“.
  • Give the user feedback when a form is submitted or an item has been bought. (or if there was an error)


  • If the user chooses to click “read more” he is willing to actually read more by own choice, don’t force users to see all content at once. Let them have the choice. Avoid large text blocks!
  • Use a text color well visible against the background.
  • Use fonts that are easy to read.


  • Consider adding icons, pictograms or graphics to enhance and clarify important user options further, for example a search icon.
  • Create a good workflow in galleries to enable easy overview.


  • Keep workflows as short with as few steps as possible.
  • Give the user feedback when a task is performed. (or if there is an error) Let them know you got their email or that their purchase is completed.
  • Give the user a chance to abort the workflow at any point, or to change the parameters without having to start all over again.


  • Be consistent with structure, graphics and colors not to confuse visitors.
  • Always let the user be in control of your website. Don´t use automated popups or other unexpected actions.
  • Use components, structures and patterns that are already familiar to most users.


What is interaction design? How to create good interaction web design tutorial



More articles on web usability:

Web usability – Understanding the term web usability and grasp the basics
Information Design – How to plan, structure & categorize large amounts of contents for the web
Graphic design / Web design – Enhance the brand, clarify content & give the visitor feelings of wanting or belonging etc.
Communication Design – How to communicate your brand for example in social media channels




Spread the word


Leave a Reply

Your email address will not be published. Required fields are marked *