|
|
[Usability_Design.docx](uploads/9df0b302c99f50785a5dfc91aa5413e0/Usability_Design.docx)
|
|
|
[Requirements](https://gitlab.stud.idi.ntnu.no/gruppe-12/picturerama/-/wikis/Requirements) |
|
|
# Usability design for Picturerama
|
|
|
|
|
|
Usability design is an attribute that indicates how easy and user friendly the user interface is. One of the assignment's requirements was to relate the application to Don Norman's principles of interaction design. In addition to Don Norman, the document also relates the application's design with some of Jakob Nielsen's principles, which are very alike Norman's principles. This document describes key factors and principles to a good usability design according to Don Norman and Jakob Nielsen.
|
|
|
|
|
|
## Visibility:
|
|
|
|
|
|
Visibility is a principle about component's visibility, and the more visible they are, the more likely the user is to use them. The application satisfies this by having components, like buttons and text fields, that occupy a big portion of the window. Furthermore, all the interactable interfaces are clearly visible. Users should be able to identify all controllers/components without problems. Lastly, the contrast between external background and the internal background of a component also separates the distinction between controls and non-controls.
|
|
|
|
|
|
## Affordance:
|
|
|
|
|
|
Controllers should have attributes that appeal to the user of how it is supposed to be used. For instance, a physical key on a keyboard should give the clue that it can be pressed for that key to be typed. In the application, when hovering over a component with functionality, the cursor will change its form to indicate that the component is interactable. For example, when hovering over a button, the cursor will change to a hand form to imply that the user can click it. Additionally, it will also darken the button's colour. Likewise, when hovering over a text field, the cursor will be shaped as a vertical bar to indicate that something can be written in that component. After the user has clicked the field, there will appear a blinking vertical bar giving the user an indication to write/enter text.
|
|
|
|
|
|
## Mapping:
|
|
|
|
|
|
Mapping is a principle about having a clear relationship between the controllers and their actions. It is achieved by using labels, prompt text and tool tips. All text fields used in the application will be connected to a label and contain a prompt text that gives a description of what should be entered. Additionally, some text fields even have tooltips that better explain what the application expects to be entered. Likewise, buttons also have a small text with a description of the function. For example, "Sign up" text on a button will indicate that by pressing it you will sign up, given you have entered the requirements. Another prime example occurs when downloading a PDF of a selected album. Here, a user will have to both select a file location and press "Download" button for the action to take place. Together, they will imply that a PDF will be downloaded to the selected file location.
|
|
|
|
|
|
## Constrains:
|
|
|
|
|
|
Constrains is a principle about limiting the possibilities of a user. This is done by simplifying the interfaces and guiding the user to the next action. Instances where this is satisfied, is when the application disables buttons in cases were interaction with it will cause errors or exceptions. In other words, buttons that are not meant to be used at that time, will not be able to be pressed. Secondly, the application uses other input controllers than text fields when possible. This is done to hinder incorrect input and to give the user a better understanding of what type of input the application wants. For instance, when choosing an album, you only get the option to select albums, instead of having to write the name of the album in a text field. Lastly, each page in the application only contains a few optional actions, as this keeps the interfaces/pages simple and understandable. This also keeps the cohesion on each page.
|
|
|
|
|
|
## Learnability/consistency:
|
|
|
|
|
|
One of the biggest ways people learn is by discovering patterns. Patterns makes it easier to learn, understand and navigate through an application. This was achieved by making all buttons look and behave in the similar way. Moreover, all buttons have understandable titles that are easy to read, so the user know what buttons do. Additionally, the application's components have low complexity between each other, making the application easy to use. There are not many steps to perform a single action. All of this leads to improved learnability and usage.
|
|
|
|
|
|
## Efficiency:
|
|
|
|
|
|
Efficiency is a principle about how well the application is at doing what it is expected to do, and the time used for the user to complete tasks. The application has implemented this by firstly using keyboard keys to quicker navigate through the components. Tab and escape keys, arrows and enter (spacebar for IOS devices) can all be used to "focus" move throughout every component with functionality.
|
|
|
|
|
|
Furthermore, images are loaded in the background of the running application. This increases efficiency by letting the user move in the application while images are being loaded, instead of having the user to wait for the images to be loaded.
|
|
|
|
|
|
## Feedback/errors:
|
|
|
|
|
|
A good usability design also has a way to handle and display any errors or give feedback to users. The application has many feedback labels displaying information if something goes wrong or if something is successful. If the user creates an error, a message will be displayed containing information about what happened. An example is if the user tries to add a photo to an album while not having selected a photo, the user gets a message saying it did not work since no photo was selected. All these errors and exceptions are then logged and saved, so that the user can go back and see what went wrong.
|
|
|
|
|
|
To improve the feedback system even more, a loading wheel was implemented in login and signup menus. The loading wheel shows that the application is working with registering or logging in a user. This appeals that the user needs to wait while the system and the database is working and processing the information.
|
|
|
|
|
|
## Satisfaction:
|
|
|
|
|
|
Satisfaction principle is about how pleasant and satisfying it is to use the application. Firstly, the application is responsive and quick. Background load option for JavaFX images makes accessing the photo scene quick even for slow computers. Secondly, as mentioned before, there is a loading animation in signup and login scenes. It is a visual representation that the application is processing the information. Thirdly, the user gets a visual response when tabbing to or hovering over a button, in the form that the button changes colour. Additionally, no vibrant colours were used as primary application colours, to avoid discomfort. The simple application design is satisfying and responsive to use, but testing the design satisfaction was hard because of the COVID-19 pandemic.
|
|
|
|
|
|
# References
|
|
|
|
|
|
Nielsen, Jakob. _Usability 101: Introduction to Usability._ 01 03, 2012. https://www.nngroup.com/articles/usability-101-introduction-to-usability/ (accessed 04 2020).
|
|
|
|
|
|
Rekhi, Sachin. _Don Norman's Principles of Interaction Design._ 01 23, 2017. https://medium.com/@sachinrekhi/don-normans-principles-of-interaction-design-51025a2c0f33 (accessed 04 2020). |
|
|
\ No newline at end of file |