Universal-Design.md

+
+
+**To allow for great universal design, we followed Don Norman’s principles of interaction design**
+
+1. **Visibility** - We made the tasks in the task list glow when an user hovers over them and added a border to clearly define what elements are included in the task. We also made all buttons interactive and with a color that suits the task. Green buttons for creation, red for deletion, and gray for modifying and completion. All buttons change layout when you hover over to clearly indicate that interaction is possible.
+
+2. **Feedback** - We chose to give the user textual feedback in the form of an alert on the top of the application for errors and warnings. When creating a task with an empty task name, start, and end-date the user is met with a blue alert specifying what field is missing input. When deleting a category the user is prompted with a red alert warning that all subsequent tasks in that category also will be deleted. The user will also get feedback in the form of visibility, task names moving when the user hovers over indicates that they are clickable and the application switches to a different view then clicked.
+
+3. **Constraints** - The application is made to be minimalistic to avoid clutter and confusion. To offer the user the needed options for modification we placed the options where they belong. Say you want to edit a task, you first have to click on the task, this takes you into task details for the specific task, and the user is offered an edit option. Having the edit option in the tasklist would clutter to mutch. Though you need some clicking to edit a task, changing priority can be done simply by clicking on the priority symbol directly in the task list, this is done to prevent features that are commonly used to require a lot of clicking from the user.
+
+4. **Mapping** - To allow for strong mapping in the application, we placed the elements where they fit best. To figure this out we used the results of the usability and user tests, while monitoring the tested we noted what element placements that were troubling and adapted the layout. We placed sorting icons next to the description of the elements they were to sort, and made the new task/category buttons follow the user when scrolling down a long list.
+
+5. **Consistency** - We made sure there was strong consistency between all elements and executions. Similar buttons to achieve similar tasks, no matter where in the application the user is. Green buttons for Completion and Generation, red for deletion of tasks and category. Trashcan symbol for deletion of the task to differentiate it from completion. The different sorting icons look similar but have small differences to more accurately explain what parameters you are sorting by. Going into the task, category, and completed task details are done in the same way, by clicking on a button containing the name.  
+
+6. **Affordance** - The application achieves good affordance by telling the user what a button does. [New task], [Delete task], [Delete category and tasks]. Affordance is also achieved by highlighting icons when hovering over and constraining task properties within a frame with the task name. Moving buttons indicate interactivity and intuitive icon objects. Also creating a task gives the user no option to make errors, if an error is made, the user will be notified and told what went wrong and how to fix it.
+
+
+**The app takes consideration to a perceivable design based on WCAG 2.1 guidelines of principle 1**
+
+
+**Textual alternatives has been added to the non-textual buttons**
+- Trashcans
+- Priority stars
+
+
+**Possible to customize**
+- Success criterion 1.3.1 Information and relationships
+  - The none-filled forms will be colored with red, and alert message with be shown at the top.
+  - Each elemelt of the form page are labeled with type informastion are expected to be filled with. 
+  - The meaning of objects in the application will not effected by the order of objects.
+
+
+**The app has been designed to fit the criteria of element separation**.
+- The design colors that have been used are above the level of needed contrast to separate the contents.
+  - The tasks are colored with black when the background is white.  
+  - The texts inside the dark areas are colored white to stand out in contrast to the black.
+  - The other type of texts are color with black to stand out in contrast to the background.
+- The use of colors would help to understand the function of the elemment in addition to the text.
+- The app gives a scalable view to fit zooming as well.
+  - Most of the containers are designed by bootsrap and support flexable sizing.
+- Individual elements are navigable with keyboards
+