Donald Norman's principles - Leonhest/HandballOrg_App GitHub Wiki
Within the field of human-computer interaction, the accomplished researcher Donald Norman is acclaimed for his principles surrounding universal design. The central points of Norman's principles is the desire for an intuitive design which overcomes what he claims are the two major pitfalls of interfaces: "the gulf of execution" and "the gulf of evaluation".
Gulf of execution - the gap between a user's goal for action and the means to execute that goal such as going through obstacles to close a page or submit a contact form.
Gulf of evaluation - the gap between a user’s expectation of an action (i.e. receiving some form of feedback) and the lack of expected or any response.
He has provided six key design principles to keep in mind when designing an interactive design. This page contains information on which points were covered of Donald Norman's principles.
1. Visibility The program is created in a way such that the user can easily identify focused elements such as buttons or text fields. Firstly, the focused element is highlighted by a grey or blue color, which is easy to see due to contrast. It should be apparent which elements are chosen by the user. Secondly, the program is built in a way such that only essential information and options are visible on the screen. For example, the result page only includes match information and result registration options.
Figure 1. Tournament_Page_Example
Figure 2. Team Registry Example
2. Feedback The current build of the application includes code that informs the user about changes they have done in the program. If the user registers a new team, it shows up immediately. Also, invalid input will be caught and the user will be notified with a text specifying the error. Overall, the program provides immediate feedback to the user.
Figure 3. Team Registry Example
Figure 4. Invalid Input Example
3. Affordance The layout of our program is intuitive and easily understandable such that the user can navigate and perform desired functions just by exploring (looking and listening). The program's main page has a menu/button bar with all functions represented by tabs, allowing the user to readily access and change pages. There are no extra obstacles for the user to overcome when trying to accomplish a task and the interface is self-explanatory.
Figure 5. Main Page Example
4. Mapping Throughout the program, there is a constant focus on mapping. An example of this is the region choice page which has six buttons with six pictures representing their effects. (What pictures and what effects)The other pages also maintain the focus on the connection between visual understanding and function. If you look at the program's tableview, you can easily understand it is scrollable due to the connection people have with the scrollbar. The scrollbar also has the additional benefit of providing immediate feedback when used.
Figure 6. Region Choice Example
Figure 7. FeedBack Example
5. Constraints The constraints of the program intentionally reduces the user's choices and potential errors. This is done in order to help guide the user through the program and avoid that potential gulf of execution. A good example is that the text field inputs are restricted in a way such that the user cannot insert information that doesn't give sense. A phone number text input cannot include letters, only numbers.
Figure 8. Phone Number Example
6. Consistency Lastly, Norman encourages a design which focuses on maintaining consistency. This principle discusses the idea of providing an interface where the user isn't unintentionally surprised and where similar actions provide similar feedback/reactions. In the program, all buttons with the same function has the same name, and are located in the same place. Another example is that the tableview contains the same structure of data for every element in a given table. The rows in a Tournament table include the name, start date, and end date in that order. Consequently, every tournament added will have its information listed in that order within the table.
Figure 9. Button Bar Example
Figure 10. Tournament Page Example