This document, created by Jesse James Garret (2000), clarifies some elements of design related to web design.
Garret’s concept can be analysed in layers and columns. These layers will be briefly mentioned below. The software interface column is relates to user interface (UI), while the hypertext system refers to user experience (UX).
The Visual Design is the graphic element of the interface of a website, it is very important to define the identity of your software, this is the most concrete layer.
In the second layer we have Interface Design, as a software interface, Navigation Design, as a hypertext system, and Information Design in both areas. Interface Design facilitates the user interaction with the functionality of the program. Navigation Design has the objective to help the user find the information. Information Design makes the information easier to understand.
Interaction Design, for software interface and Information Architecture, for hypertext system, are the elements of the third layer. Interaction Design facilitates the flow of the application, it improves the way in which the user interacts with the program. Information Architecture structures the information in an intuitive way.
In the third layer we have Functional Specifications for interface and Content Requirements for system. The Functional Specifications is the functionality of the website. Content Requirements are the elements that are required to give a good user experience.
In the last layer, the most abstract layer, we have User Needs and Site Objectives. The User Needs are set after researches and tests with the user, these are the needs of the user to have a good experience. Site Objectives are the main targets of the website.
Combining all these elements and doing several tests for UX and UI, will result in the best experience between the final user and your program.