Design: Clause Overlays

Currently, all the overlays inmain screen-01 our designs are gold. However, we discovered that this will cause problems due to the vast amount of clauses that we need to hotspot with the overlays. Using just one colour would make it very confusing and hard to distinguish between the clauses, as some clauses are situated on the same lines. Therefore, to over come this problem we decided to experiment with alternating the clauses using different coloured overlays.

main screen experiment-01

Here we experimenting with changing the opacity of the existing colour. We found that this still wasn’t clear enough to distinguish the clauses as the overlays were too similar.

main screen experiment-02

We looked at using a slightly lighter gold to try differentiate the clauses. This worked slightly better but we still felt the colours were too similar.

main screen experiment-03

Therefore, we decided to use the blue from Salisburys’ style guide in order to distinctly separate the clause overlays. We will use a low opacity on the blue so that it doesn’t stand out too much and to allow the latin to still be slightly visible.

It is important that the clause overlays are clear and easy to differentiate from one another as each overlay hotspot brings up more details about the selected clause. Using one colour makes it really confusing and complicated for users, this would not be successful as we want our app to be intuitive and easy for a range of ages to use within the exhibition. Therefore by making these slight changes, it helps to visually improve the design of the app as well as enhance users experiences, making it a lot clearer for them to use the hotspot overlays.

Leave a Reply