Design versions

Appendix 1 presents the two versions of the design for the BBA Club’s website. Figure 1-4 represents the mock-ups for a poorly designed UX/UI website and Figure 5-6 represent the mock-ups for a well-designed UX/UI website. The criteria for the author to make designs in such a way was based on the heuristics described in point 2.6.

The reader firstly can vividly notice that there are twice as much screenshots required to complete the task than that of the good UX/UI design. That’s the first difference – it will take the user twice as many actions to perform a task on a badly designed website in comparison with a well- designed website. Does this mean it would take twice as much time?

Appendix 4 can be referred to with the calculation on task duration for both designs.

Usability Hub provides the opportunity to download the whole time spent by the user whilst completing a task, but in milliseconds. Thus, the author calculated the seconds of task completion by the user for convenience and understanding of the reader. Sheet

“BAD_UX_TaskDuration” in Appendix 4 points out that users spent on average 45.5 seconds completing the whole task. Whereas in sheet “GOOD_UX_TaskDuration” the calculation is that a user spent on average 16.3 seconds completing the task. Thus, proving that a poorly designed website took up 2.8 times more for the user to complete a task (see Appendix 4, sheet “End_Results”). Table 3 below shows the task duration of all 51 one participants from Group A. On the Y axis is the total amount of seconds it took a user on the X axis to complete a task. It can be seen in the table that most users on average performed within the 45 second average mentioned earlier. Some users were quicker by a few seconds and others were faster, but there were 4 users who took an exceptionally long time to perform the task, they can be seen by the long bars in the range of 80-90 seconds. The assumption the author made is that these users might have spent a long time studying the 3 part of the design (see Appendix 1, Figure 3). On the other hand, users 6 and 8 performed the task in 20 seconds and under. Although it doesn’t guarantee that they correctly performed the task.

Table 3 Task duration for bad UX/UI

Source 16 Author, Appendix 4

Table 4 below depicts the task duration in a good UX/UI design. It is similar to Table 3 above, but on the Y axis the maximum value is 40 instead of 100. In a good UX/UI design it is seen below that most users averaged the 16 seconds mentioned above, yet there were also users 11 and 26 who took up a long time to complete the task, but it is still smaller than the average task duration in a bad UX/UI design. The author assumes it happened because the user was unsure whether he should choose the event on the left first or signed up straight away on the right (see Appendix 1, Figure 6). The reason for this assumption is in the heatmaps which are described in the following point 4.1.2.

0 10 20 30 40 50 60 70 80 90 100

1 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51

Number of seconds

User #

Task duration in seconds

Table 4 Task duration in seconds in a good UX/UI design

Source 17 Author - Appendix 4

The main goal of task duration calculation was to acknowledge that a poorly designed web platform can force the user to complete a task much longer than he/she could have in a well-designed website. In the real world, users are likely to drop out of their task if it takes too long (Nielsen, 1993).

The second difference concerns the aesthetics and minimalist design, which is also one of the heuristics. Figures 1-4 do not comply with this aspect since they have an unnecessary background picture, which creates “noise” for the users – too many things to pay attention to, as well as there is extra useless information for the user such as the date in the top right corner shown in Figure 1 Appendix 1. A good UX/UI provides for the end-user necessary information or makes it clear what possible actions can be performed. That is why in Figure 5 we can see that the design does not have extra “noise”

in the background. It is rather minimalistic and in the top right corner in Figure 5 the reader can already see the menu visible. This way the end-user can start performing the desired action quicker.

On the other hand, the bad UX/UI design does possess good heuristics. The similarity between the two designs will be in the UI that is designed in a Z pattern, which is described in point 2.2.

The second similarity would concern the heuristic “visibility of system status”. It should let the user know that the action was understood. In both of the Figures 2-3 the reader can find a response of the system to the user – when the user presses “Events”

then he/she will be redirected to the corresponding page and the user will see on which

0

page he/she is on the top right corner in Appendix 1 Figure 3. At the same time, the reader can notice that Figures 5-6 show a reaction to the user that when he/she presses on the “Events” button it becomes bold. It also lets the user know on which page he/she is at the same position.

The bad UX/UI design has recognition for the user in terms of the “burger” menu button shown in Appendix 1 Figure 1 in the top right corner. This is a widely accepted icon used in many websites, the user understands that if he/she presses on this icon they will find the menu of the website. This will affect the experiment.