The Web was originally designed as a hypertextual information space. Huh? 😕
This means it was built as a way to display text on a computer display with references (hyperlinks) to other text that the reader can immediately access.
The increased development of technologies has led to websites to be seen as software rather than a hypertext system. When looking at a website from a piece of software, we tend to think of it from a task-oriented manner. In contrast, viewing a website as a hypertext we are more concerned about an informational approach (information-oriented)
Because of this dual nature, it can be confusing to understand the different website elements and know the relationship between them.
What typically goes into building a website with a great user experience?
Site Objectives
What are the business, creative, or other internally derived goals for the site?
User Needs
According to Nngroup, a user's need statement is an actionable problem statement used to summarize who a particular user is, the user’s need, and why the need is important to that user. We need to find out through user research what is important to our visitors and capture it because it shapes what we want to achieve with our site.
Traditional need statements have 3 components: 1) a user, 2) a need, and 3) a goal. These can then be combined using the following pattern:
[A user] needs [need] so that [goal].
Requirements
If we look at your website as software, then when thinking about requirements you need to think about its features. Essentially a detailed description of functionality the site must include to meet a user's needs.
On the other hand, if we look at your site as a hypertext system then the requirements take another meaning. Here we would describe the content required to meet the user needs from an informational point of view.
User Experience Design
Interaction design is the design of products to include the way users will interact with it. So if we are thinking about your site as software we are defining how the user will interact with the site's functionality to make it easier to accomplish tasks.
Contrast that to information architecture, where we look at how information is organized to make it more intuitive to find.
User Interface Design
Information design is the practice of presenting information in a way that makes it most accessible and easily understood by users.
Traditional interface design in a software product is the design of interface elements to facilitate user interaction. So when discussing a navigation menu, it's how the menu behaves when someone interacts with it. In a hypertext system though, navigation design is how information is structured and organized and how the user will get to it. Going back to our navigation menu example, what belongs in the navigation menu and why? Does it make sense to help the user through the site?
Lastly, we arrive at visual design. It's how the interface elements look. In our navigation menu example, the visual design would specify what the call-to-action button looks like. In a hypertext system, it's the visual treatment we apply to text.
Only by looking at all the elements that make up the user experience, can we truly build websites that make this experience great.
