Per ardua ad astra

-Translates into ‘through adversity to the stars’. Personal interpretation: ‘a task may seem hard or impossible, but you will accomplish it – and won’t that feel sweet!’

APRIL 5TH 2019: crunch day. A week and a half’s worth of solid coding, three months or so worth of research, designing and pitching ideas to the Broads Authority and 7,492 lines of code put to the test. How would our testing group find our app?

The testers

The testers were the same three members of the Women’s Institute who met us in Beccles on February 1st and gave us their thoughts on some very early UI concepts and also provided insight as to what they’d see in an app like this. They’re all retired and local to the Lowestoft area, so they are possibly a target audience. As has been mentioned many times in various posts about this project since the beginning of the year, the trouble with this app is that the target audience is extremely broad and so it is very difficult, if not impossible, to find an ‘ideal testing group’. I guess in an ideal world it would be a mix of older and younger people from the area.

The testers were the same members of the WI that we met in Beccles on February 1st.

The testing strategy

It was a very simple that we ran – we met the testers in a cafe on the edge of the broad at Oulton Broad and just handed them a Samsung Galaxy S7 and an S8 with the web app running on it and observed how they used the app and listened to their comments about it. It was very relaxed and informal compared to the user testing that I carried out at The User Story and even for my own projects, outlined in detail here and here. Traditionally I’d write out a test plan with clear goals and objectives for the user to reach, but in this case we felt that it would be more beneficial to get some gut reactions to the web app and see how they interacted with it and the comments they made without much encouragement from us.

Namii and Corrina took extensive notes during the testing, closely observing what the WI members were doing and how they were interacting with the web app. I was also closely observing and taking in what they were doing. Namii was asking a lot about the usability and occasionally asking them to complete small tasks such as seeing if they could find some components that they were struggling to find on their own or weren’t finding (this in itself presented a usability issue, so Namii wanted to see if the components were easily accessible) and asking for their thoughts on how they were finding using the app itself. Corrina focused a lot more on asking questions related to the typography and visual elements of the apps to see if the design was a success with our testers. Ameer asked the testers specifically about the animations and how they felt about those. Zach had designed some prototypes for a signage and interpretation boards which he wanted some opinions on.

The test results

Overall it was fairly positively-received, with some usability points beginning to show in this older target audience, at least.

Core pages

It was apparent to us that these people didn’t read the instructions on the page at all. On the page it informs the user that they need to tap on the right arrow button to move onto the next page, but they instinctively tried to swipe the page to go to the next page.

The text on the introductory page tells the user to touch the right arrow to move on.

They were a little confused about how to move forwards and also use the rest of the app once they had left this page, they mentioned that some instructions telling the user how to use the app would be a good idea and would have helped them to use the app.

It also wasn’t completely obvious to them that they needed to tap on the big buttons on the theme selection page to move onto a theme and then the experience. It wasn’t obvious that these were buttons.

When asked about the use of the icons on the page and having shown us that they had troubles with navigation, one of the women said: ‘I don’t really know what the signs mean, they’re all so modern. I think your generation would be able to figure it out. It’s too sciencey for me.’ This indicates to us that perhaps the icons are not recognisable to the older generation, perhaps the app would be usable and icons more recognisable to younger people who have grown up using them in other apps.

They didn’t really notice that the logo in the upper left corner of every page went back to the theme selection page when tapped. Some of them were confused that the logo didn’t go back to the index page, but rather the theme selection page. My initial thought process behind this was that the index page is actually rather useless once you’ve read it once and that I thought the chances were that if you wanted to return to any page it would probably be the theme selection page where you could choose a different theme.

The map

Firstly, there was an odd bug with the map that prevented the experience from being perfect. Asides from the ‘sticking plaster’ patches made to its CSS to realign the items in the drop-down menu, the map didn’t close close correctly on all pages. For some reason, it only closes correctly on the ages in the finder app and not on the theme selection pages or any of the other pages. Unfortunately, the testers tried to open the map on the pages where it didn’t close correctly, revealing this bug.

On the whole, the map presented some pretty obvious usability problems, mainly down to it not featuring nearly enough clear call-to-actions. Testers struggled to:

  • Open the map in the first place – they didn’t notice the map button positioned at the bottom of the screen.
  • Change the location of the map shown.
  • Understand what the forwards and backwards buttons that cycle through the locations do.

The testers were also unclear about the button to access the map works. It is present on every page of the web app, positioned at the bottom of the app in the centre. This means that the map can be opened from any page, but the WI didn’t understand this. Namii first asked them to find the map when they were experimenting with the 360 degree experience and from there each time they wanted to look at the map they felt that they could only access it from the 360 degree experience. They never figured that it could be opened from any page.

The testers asked if selecting a new location on the map changed all of the content from the app to make it relevant to that place. This was an interesting thought and showed that they didn’t understand the functionality of the map, but had considered how the map might be better-placed in the web app.

However, the icons to show various facilities went down very well and were easily understood. But, as was said in my video explaining how the map was made, the British Rail logo as the ‘public transport’ icon led the users to believe that this was a button to show just train stations. It’s hard to find a small icon that depicts all public transport and there may be some copyright issues with using the British Rail logo for this button.

Unfortunately it was not obvious to users how the location picker worked.

The finder

The main pitfalls with this were:

  • Some of the language was too technical. One of the women knew what ‘marginal species’ meant, but she wasn’t sure if other people would know.
  • The ‘birds’ option features an image of a barn owl that the testers commented was not often seen in the area, so didn’t seem relevant – or perhaps was misleading.
  • Content should be more tailored to the locations. The testers mentioned that they would have liked to see more information about ducks and other animals that they see a lot around Oulton Broad.
  • The purpose of the finder app was not very clear to them or explained much. The aim of the app is to allow its users to explore habitats in locations.
  • Some of the information was incorrect – this showed that this was just a prototype but development of the finder was rather rushed, so some information was in the wrong place.
  • The testers wanted to go back to the beginning of the finder, but they couldn’t because there was no button to allow them to do this. All they could do was tap on the logo in the upper left corner to return back to the theme selection page.
  • They suggested that instead of repeating animals in seasons where there were no unique animals found, the app should tell you that nothing new was found.

The testers were also confused by the information architecture. The information architecture goes Season > Animals > Birds, but the testers didn’t think that birds should come under the category of ‘animals’. Instead, ‘birds’ should be an entity of its own. They understood the separation of ‘reptiles’ and ‘mammals’ more.

There was also a bug with this experience’s code too. Originally there had been text on each of the animal tiles with the name of the animal in the tile, held in a ‘p’ tag. The trouble is that the background colour of these tiles is white and the colour of text held in ‘p’ tags is set to white in the shared CSS file ‘core.css’, meaning that the text in the tiles appears white and therefore invisible. However, the WI didn’t know any different as they didn’t design this app, so it didn’t bother them at all. Namii mentioned that there was supposed to be text here but the WI said that they thought it’d look cluttered if there was text there. They liked the clean aesthetic that hiding the text produced, but we would have been interested to find out what they would have thought had the text been visible.

The 360 degree image experience

This was probably the most technical of the three experiences and there were some usability issues that were identified when testing this with the WI. The biggest problem is that the 360 experience works best when operated with the phone’s gyroscope controlling the field of view. The image can be dragged around to change the view, but is far more impressive when you can move the phone around to see different views of the same image. Unfortunately, in the prototype the gyroscope has to be enabled manually by tapping on a button which the WI failed to see. They also didn’t think to drag the image around the screen to change the view, which meant that they weren’t able to find the information hotspots. After we showed them how to use the experience, they also didn’t notice that the text on the hotspot dialogs was the same copy which proves that they didn’t read anything.

The grid

Without being asked to give an opinion, the WI didn’t really say a lot about the grid. They did however comment that they liked the little diagram showing you where on the grid you were and they also liked the tinted images on the grid. They enjoyed swiping up and down the page to change the view, but they didn’t really understand the idea of the grid being a two-dimensional timeline that was supposed to enable you to find out about history by era and decade. The navigational arrows on the grid were smaller than those on the other components that make the final web app and they found them difficult to tap.

Thoughts on content

The WI being residents of the area were very familiar with the area and so were able to question our content a lot. This was good validation as we were able to learn that not of all of our content was relevant to the area. It was apparent though that they didn’t really read much of the content at all, they seemed much more interested in looking at the visuals than reading any information.

Thoughts on the animations

Ameer reported that the WI said that the animations went down very well and they liked them a lot. They didn’t feel that there were too any or too little. Apparently they also helped to make the transition between pages ‘seamless’.

Animations were very well-received.

Thoughts on visual design elements

Corrina asked the WI about the design elements of the app. These are her findings:

  • The WI commented that the sails on a boat looked like arrows, perhaps these could be used to strengthen the identity.
  • The type size was big enough, but they wondered if the type would be easy for dyslexic users to read.
  • The WI liked the shape of the images and the buttons used in the app.
  • Corrina observed that some of the testers had started to use the browser back button rather than the one on the app, perhaps the one on the app is unnecessary.
  • The WI noticed that the heritage landing page image had a different colour tint applied to it than the image for the heritage page button on the theme selection page. This was a bug with the prototype.
  • The WI didn’t understand what the Angles Way brand mark was supposed to represent.
  • They said it would be good to have an additional button on the app that informed the user of the kind of activities could be done in the area.

Overall, the visual design elements were well-received.

Reflections on testing from the WI

On the surface there appears to be a lot of usability issues with this version of the app – many of them quite basic and are related to navigation and things like that. They are easily fixed (a full list of solutions is shown at the bottom of this post) but it must be remembered that this is just one user group and is with the older generation. We tried to design this app to be as user-friendly as possible for all age ranges, but it must be remembered that this app was not designed specifically to be used by older people. This is part of the problem of trying to create an app for everybody – each user group will have different requirements.

Some members of the group felt that we got information without the appropriate context by not having set questions or tasks for the usability testing, but I disagree. The context of our observations were that they were handed the app for the first time and struggled to use some of the components of it. Some people also felt that this turned more into a content audit than a usability test, but I also disagree. We were able to see what usability problems there were and also get some opinions and ideas on the context at the same time, so it wasn’t solely a content audit. Also, doesn’t the users being able to understand the content play a big part in creating a successful user experience? What good is an app to the user if they can’t understand what the content is about?

Whilst the testing was going on I was quite ‘chilled’ and definitely didn’t try to justify any of my design decisions to the WI. At Earthware and The User Story, I learned that the best way to approach testing is to pretend that you’re not attached to your design at all and let the testers do what they’d do naturally and let them talk about what they liked, disliked and would like to see more of. This way you are able to learn so much more about your design and what to do to make it better – the testers are able to talk ‘uncensored’ and tell you your true thoughts. The truth is that I was quite attached to this, having poured hours, days and even months of time into research and coding, but by pretending I wasn’t too hurt by anything negative they may have said and not trying to justify design decisions they were able to tell us more. You don’t need to justify any design decisions to your testers – that’s not their role.

Hannah Linsdell, aged 21

Hannah Linsdell quickly tested the app on the morning of the testing.

Admittedly, the observations that were made during the testing with the WI weren’t terribly surprising. Before I went to Oulton Broad, on the morning of the testing I quickly asked Hannah Linsdell, the Students’ Union President, to test the app. She was really keen to have a look at what I’ve been doing and I was interested to see if there were any usability problems to know about before I took this to the WI. Hannah knew I had been going on field trips as part of the course to do research and she saw the UI designs I made back in January, but otherwise didn’t know a lot, so was a good test candidate.  There was of course no time to fix them, but I could prepare myself and compare how they used the app to how a 21-year old used it.

There were some similarities, listed below:

  • Hannah also wanted to swipe to go between the pages and didn’t read that you needed to tap the icons.
  • I’m not sure that she knew initially that the buttons on the theme selection screen were clickable.
  • She didn’t see the button to enable the gyroscope on the 360 degree experience either.
  • It wasn’t clear to her that the arrow buttons enabled you to go backwards as well as forwards (she didn’t see the left arrow button)

Otherwise, Hannah was impressed, stating that she loved the designs and the animations.

My parents, aged 49 and 51

My parents also contributed to testing the app.

I wanted to try the app out on people ‘in the middle’, so thought my parents might be a good option. Like Hannah, my parents knew a little about the project, but not the ins-and-outs, so they were ideal people to test. My mum is 49 and uses technology a lot at work to monitor staff attendance, write emails, create formal documents and that kind of thing and at home she uses it to talk to friends on WhatsApp, buy things online and read the news. My father is 51 and has been employed in the IT industry since he was 16 and has substantial technical knowledge and know-how. He has been running his own IT support business for just over 8 years.

Here is what they said and what I observed:

General comments and observations

  • The animations were well-received.
  • The colours of the app and the images used (including the shape that they were cut into) went down well.
  • They liked the Angles Way brand mark, but didn’t understand what it represented or that tapping on it would return you to the ‘theme selection’ page.
  • Instinctively tried to swipe between the screens, but soon realised that you had to tap the buttons and were happy with doing this.
  • The first button they tapped was the right arrow on the index page – I believe that they read the copy on the page that instructed them to tap the arrows.
  • They liked the images, but did agree that the images of the animals on the page headers should be made more relevant to the animals that you can expect to see.

The map

  • Didn’t notice the map button on each page, but when pointed out they liked it and loved the fact that you could select facilities to see – tapped buttons instinctively.
  • Got every icon on the map correct, but said ‘trains’ for ‘public transport’ (due to British Rail icon, probably).
  • Didn’t know that you could change locations on the map.

The 360 degree experience

  • 360 degree experience went down well – instinctively tapped on the ‘i’ button and swiped/dragged screen when it wasn’t moving or the info panel showed up in the wrong place.
  • Tapped on the button to activate the gyroscope and enjoyed the experience – they liked moving the phone around.

The grid

They said quite a lot about the grid.

  • Really liked the grid system idea, but didn’t fully understand what it was until I explained it to them.
  • After using the grid, wanted the whole app to be built on the grid and tried to swipe a lot more.
  • Would liked to have seen more instructions on the grid to explain its purpose and how to swipe on it etc.
  • Much preferred swiping on the grid rather than using the buttons, BUT the buttons did let them know that it was possible to move across the grid (should implement CSS Scroll Snapping and disable buttons).
  • Would like to have tapped on the grid layout icon in the upper right to automatically go to selected cells – but possibly tap on the grid layout, then a bigger window opens with a more detailed view of what’s on each cell.
  • Didn’t know how to return to previous page from the grid (admittedly this functionality is not present in the prototype – they would have expected to tap on the left arrow).

Common usability problems

The following problems were common among the three different age groups tested:

  • Users wanted to swipe to move between pages and experiences rather than tap a button.
  • Users wanted images to be more relevant to what they might find at the site in the case of the finder.
  • Some users did not understand that the buttons on the theme selection page were clickable.
  • Users did not understand the function of the grid, but enjoyed using it (maybe because they could ‘swipe their way through it’).
  • The Angles Way brand mark or its function as a ‘home page button’ was generally not understood.
  • Users wanted more instruction about how to use the app.
  • The gyroscope was not intuitive to use – most users did not know to tap the button to activate it. Many users also did not think to try and drag the image around with their finger.
  • Users did not notice that the button to open the map was situated at the bottom of each page.
  • Users did not find using the map terribly intuitive – they understood the function of the facilities buttons, but did not know how to change the location. They were also unsure of how the map was ‘placed’ in the app – they thought that changing the location would change the whole experience of using the map to make it relevant to the new location.
  • Users mistook ‘public transport’ for ‘trains’ on the map due to the British Rail logo being used as an icon.

Suggestions for improvements

Many of the problems identified can be fixed by having clearer calls-to-action and making instructions more obvious – or implementing them.

Improvements for the navigation

There are several things that could be done here.

Firstly, swiping could be implemented. It appears that as soon as you mention this is an ‘app’ that runs on a phone, users are keen to swipe (just like they might on a traditional installed app). At this point, I do not know of any web-based technology that allows users to swipe to navigate forwards and backwards through pages (our jQuery Mobile prototype did not have support for this – only ‘slide transitions’ between divs), but if this were to be developed further then swiping to navigate further should be investigated.

If swiping can’t be implemented, then it needs to be more obvious to the user that they need to tap the buttons to navigate. There are several options:

  • Simply putting the instructional text ‘tap the button to move on’ (or similar) in its own paragraph underneath the main text could help to make the existing instructional text easier to see.
  • Subtle animations (such as the arrow bouncing up and down, changing size, colour or pulsing) could be used to catch the user’s attention and encourage them to tap on the button.
  • Small dialog boxes could appear as speech bubbles with instructions in them, instructing the user to use the buttons.
  • The shape of the buttons could be changed to something a little more generic, such as the buttons I used in my original web app prototype from February.
Simply putting the text about tapping on the buttons on a line beneath the main text could help.

 

Subtle animations could be used to draw attention to the arrow buttons.

It was suggested that adding the arrow icons to the buttons on the theme selection page could help to make the user aware that these are clickable, but I am unsure about this. The arrow icons weren’t all that obvious to a lot of users, but it was obvious to the users that the big trapezium buttons on the finder app were clickable. The difference to me is the spacing between the buttons – perhaps the buttons on the theme selection page need more spacing to make them more obviously ‘buttons’.

Improvements for other visual elements

It would be easy to change images for more relevant ones, this would not take a lot of time, but would make for a better experience if users felt that the app was more authentic.

Testing with dyslexic and disabled people could be carried out to ensure that the app was accessible for those people.

The brand mark could be redesigned with more input from the general public as to its meaning and concept, or it could be featured in more promotional material surrounding the Broads and the Angles Way to make it more ‘known’ to the public and therefore become more recognised.

Improvements for the 360 degree experience

This experience is still not terribly refined, for example opening one information dialog means that another can’t be opened. The information dialogs appear full-screen, but not ‘anchor’ to any point on the screen at all, meaning that they often don’t appear in the correct place. Basic functionality like this needs to be sorted first.

In addition to basic functionality working, the 360 degree experience also needs to:

  • Be set to use the device gyroscope by default to save users enabling this themselves.
  • Have a lot more context given about the location and purpose of the experience so that users understand why it exists.
  • It needs to be easier or more obvious to close the dialog boxes – at the moment tapping on the text closes the dialog box, but this is not obvious to the user.
  • The arrow going back to the landing page needs to be hidden when the dialog box is open – users were tapping on this button thinking that it would close the dialog box, but instead they were being taken back to the previous page.

Of all of the experiences in the prototype, this one was probably the least-refined. Remember that the original idea was to use the 360 degree image to show how the area would have looked centuries or even millennia ago – which the prototype does not do. I think if the prototype did show an ‘old’ view of the site and if this had been testing in the location of where the image was taken then it would have made more sense to the testers.

Basic functionality such as dialog boxes appearing in the correct location need to be addressed.

Improvements for the history grid

The big setback with this is that users did not understand its purpose. Again, more instructions are needed. Either the landing page for the heritage theme needs to be more informative and more gripping for the user to read, or there needs to be micro-copy on the grid itself which explain the purpose. A similar thing could be done here as the navigational buttons.

Users enjoyed swiping on the grid rather than tapping the directional buttons. However, removing the directional buttons based on this feedback would not be a good idea because for some users, the arrows act as indicators that the user can swipe down and across. With the work that has already been put into making the buttons functional, it would be a good idea to leave them functional and to make the arrows bigger to resolve the problem with users not being able to tap them due to them being too small. This keeps the arrows as multi-functional elements and the buttons can still be used by those who wish to.

Improvements for the map

The map also requires stronger calls-to-action but its place and purpose in the web app as a whole possibly needs to be reconsidered.

Access to the map in the form that it is currently in could be improved by changing the icon in the map button to a text label, as was originally proposed. This label was removed because the team was keen to use an icon to keep the app looking more uniform, but it seems that people did not notice this icon at all. It would be interesting to see if the text label made access to the map more obvious.

The map button from the original page designs might have worked better.

Users didn’t know that they could change the location, so the UI design of this element needs to be rethought. On a bigger scale, the positioning of the map in the app needs to be reconsidered. Users were unsure of its purpose. Perhaps the map needs to appear on one of the opening pages of the app, the user selects a location (maybe the buttons could be similar to the buttons used on the theme selection page) and then the other experiences are all relevant to that location. The user could still open the map up to find facilities, but to change the location they’d need to go back to a ‘location selection’ page. This might make the map more useful and understandable to users.

Additionally, an icon depicting public transport needs to be used to show that. The British Rail logo has too many connotations to trains and railways which may mean that if the user was looking for a taxi or a bus they might not think to tap on that button. Maybe an icon of a bus next to a train could be used.

Improvements for the finder

On the whole the simple finder presented very usability problems, but a couple of things were mentioned:

  • Images, particularly hero images, need to be more relevant to the sort of animals that you’d actually see.
  • Content in the finder needs to be more relevant to the location – this could tie in nicely to making the user to select a location at the beginning of the user flow. At the moment it is ‘generic’ to the Broads as a whole, not just the location that the user might be in when they’re using the app.
  • Users need to be able to go back to the beginning of the finder app without having to select the theme again.

The finder has a lot of scope to grow and could become quite advanced, possibly helping the user to identity wildlife based on features and appearance.

Changes to the app architecture and structure

Changing the role of the map changes the structure of the app.

Swiping navigation could be implemented if the views of my parents are taken into account and a new version of this app is built entirely on the grid system that the heritage experience already is. Different locations and experiences could be built on different grids, all different sizes. See the diagram below for a vision of how this could work.

Basic diagram showing how the entire web app could potentially be built on a grid.

This idea has not been tested or validated, but the diagram above gives some indication as to how the web app could be built on grids. The different colours in a diagram relate to the different grids, e.g. the blue cells all relate to a grid relating to the nature theme. Empty squares on the grid are just to make the diagram easier to understand. The user would move between experiences by swiping and CSS ScrollSnap would be used to help make that a better experience.

The diagram also shows a ‘How-to’ page. This would be a page explaining how to use the app and its components. Testing suggests that it is probably required.

Reflections on the user testing

Was this a usability failure? Are there too many things to put right to declare that this is a usability success?

No. On the face of it, there are a lot of issues to resolve, but previous experience and just looking at real-world examples tells me that you never get it right first time. Going back to the development of the Nellie’s Nursery website prototype, the first version of it which was tested in February 2018 presented a number of serious usability problems. By the time the project was handed in for Year 1 submission in May 2018, there had been several more iterations and rounds of testing and the prototype looked, performed and acted completely differently. It was far more refined. If this project were to be continued, the same would eventually become true. You can already see the difference between this prototype and the one I made in February 2019 to present to the Broads Authority.

The design of the Nellie’s Nursery website improved with each round of usability testing. The same would also be true for the Broads app if it were to be developed.

The testing methodology was the correct one, in my opinion. If this project were to continue then the following rounds of testing may include more structured tasks to gain insights about specific elements and components of the app, but by giving the WI, Hannah and my parents the app to experiment with we found out about all aspects of the app in a calm and relaxed manner. Sometimes setting tasks for the users to complete puts them in slightly stressful conditions and they may ‘bottle’ their thoughts as to not look silly or upset you. By testing in the way we did, we had none of this and got a lot of extra insight from our testers that we otherwise may not have received.

There is plenty to build on. A lot of the solutions are quite simple to implement and mainly just involve making buttons and other calls-to-action more obvious.

Side-by-side: the prototype I coded in February compared with the prototype tested in April.

Evaluating the design against Dieter Rams’ ‘Ten Timeless Commandments for Good Design’

Dieter Rams is a German designer who is closely affiliated with Braun and the design of some of their products in the 1950s, 1960s and 1970s. He is a strong advocate for ‘functionalist design’ which follows the principles of ‘less is more’ and that designs should put function before form. Rams is also a retired academic and is associated with the Functionalist School of Industrial Design.

This Braun radio is one of Rams’ most famous functionalist designs.

Rams is also famous for his ten commandments for good design. These are good guidelines to follow to both tangible and digital products from a usability point of view – perfect for a UX designer to follow. Below are his commandments and how the app that we collaboratively designed meets them.

  • Good design is innovative: the web app prototype features some interesting concepts, such as the 360 degree experience and the Heritage Grid which can be expanded on. It’s true that ‘apps for the outdoors’ are a growing market, the app we tested at Caistor and the WymTrails app in Wymondham are good examples, but ours features multiple interactive experiences whereas most just feature one or two. The Nature Finder app has a lot for development, perhaps one day it could identify species from photographs.
  • Good design makes a product useful: the app is designed to be a ‘companion’ to a visit along the Angles Way. It provides a variety of information to the user about the Angles Way in locations where interpretation boards may not be available. Users can learn about history and the environment that they are walking in by using this app. The map facility also enables the user to help plan their day by showing facilities and could be expanded to show walking routes too. The app fulfills multiple purposes that make it helpful.
  • Good design is aesthetic: the app has been designed to look and clean, whilst being simple, consistent and sticking to a set colour palette. The design is considerate of how the user will interact with it with interactions being designed to be as simple as possible, however usability testing has revealed that they could be simpler (e.g. swiping instead of tapping buttons).
  • Good design makes a product understandable: to us [the designers], the design was the understandable: the navigation buttons are in the shape of the direction that they navigate in and there is some body copy that explains briefly what the app is and how to use it. However, usability testing showed that potentially there could be some more instructions or the instructions that exist need to be made more obvious, especially on the 360 Degree Experience and the Heritage Grid.
  • Good design is unobtrusive: the design is simple and consistent and there were no complaints about the design being ‘overdone’ or ‘overly-decorative’ during the usability testing. There are no popups or any modals in the app, so theoretically there is nothing that can be obtrusive to the user.
  • Good design is honest: the app is still in prototype stages, so there may be things that the app says it can do that it can, but not yet to the best standard, for example the Heritage Grid may not be as insightful as it could be and the 360 Degree Image Experience may not be as ‘spectacular’ an experience as we’d like it to be at the moment because it is using a current-day image of Oulton Broad and not a rendition of how it could have looked centuries ago. Back in Phase 1 we even changed one of our concepts from ‘An adventure for the senses’ to ‘Discover what nature is hiding’ after initial testing with the Women’s Institute on February 1st suggested that the word ‘adventure’ could potentially lead the user to believe that this is more exciting than it might be.
  • Good design is long-lasting: the simple nature of our design and its code means that it can be updated quickly and easily without changing the way it looks too much. Usability testing indicates that on the whole the appearance and especially the animations of the app prototype are a success. The design can be applied to other sites too, such as the Werryman’s Way. Small changes could be made to the visual identity and different experiences could be created for the different sites. From a code perspective, the web app is built on commonly-used or new frameworks, so browser and technical support is good or will become better.
  • Good design is thorough down to the last detail: we feel that we carefully designed this web app prototype, ensuring that we used an icon set that generally used conventional symbols (such as left and right arrow buttons for navigation and standard toilet, parking and cafe symbols for the facilities icons on the map) but testing revealed that even some of these common icons were not recognised by all user groups.
  • Good design is environmentally-friendly: the app encourages users to interact with the environment, but not to damage or exploit it. At one point we were even considering including an interactive map about how the sea levels could change if climate change increases at the rate that it is, so including information on threats to the environment in this app is something that could be added in the future or as an extension to the Nature Finder app.
  • Good design involves as little design as possible: each page in the app follows a very consistent design with little variation which made producing this app quite quick. Animations are clean and consistent too – they are also not too fast and not too slow. Information is presented in a clear and informative way with little distractions getting in the way.

On the whole, the app fits these commandments fairly well with just a few usability pitfalls. Evaluating the web app against these commandments shows that the usability of the app may be successful than I first imagined it to be.

References

Vitsoe.com. (n.d.). Dieter Rams | About Vitsœ | Vitsœ. [online] Available at: https://www.vitsoe.com/gb/about/dieter-rams [Accessed 3 May 2019].

Domingo, M. (2019). Dieter Rams: 10 Timeless Commandments for Good Design. [online] The Interaction Design Foundation. Available at: https://www.interaction-design.org/literature/article/dieter-rams-10-timeless-commandments-for-good-design [Accessed 3 May 2019].

Vitsoe.com. (n.d.). Good design | About Vitsœ | Vitsœ. [online] Available at: https://www.vitsoe.com/gb/about/good-design [Accessed 3 May 2019].