Categories
Dev Log

5. AR Wayfinder UI Design

Prior to UI Design, the phone model selection is crucial for ensuring accessibility to all users. Given the market dominance of Android and the preference among users of all ages for its larger screens, the decision was made to use it.

Figure 1 : With the market dominance of Android’s budget phones, larger screen models should be prioritized in design due to their widespread usage and the need for older individuals with reduced sight and young people with small budget (Josh Howarth, EXPLODING TOPICS, 6 December 2023).

In order to create an app design adhering to AR principles and accessible to all users, the screen size must be taken into account.

Figure 2 : Low-fidelity wireframes, created after user research, permit rapid and cost-effective testing of design ideas, particularly during the early exploratory phases of the design process. To ensure an efficient design, each screen should be clearly defined and refined.

Adobe Color

Figure 3 : Adobe Color extracts a stunning gradient from user-selected images and helps to create an accessible colour palettes which could meet the users with eye sight problems. You can also generate gradients featuring up to 16 different colors that align with current fashion and seign trends.

Instead of the light yellow shade, the decision was made to pair it with neutral colors and maintain the original University of Hull color scheme in other applications. Excessive use of yellow necessitates the use of neutral colors like white, gray, or black for creating a harmonious and balanced design that can be achieved.

This ensures consistent branding across all designs and straightforward recognition for the University. The app’s blue-toned color scheme keeps users focused without distraction.  

University of Hull Map

Figure 4 : University of Hull can distract people with too much information in there map, So in order for the map to be efficient, as the user moves having the map around it should straight away be shown which building it is. Rather than trying to unscribble on the current map (University of Hull, n.d).

A Map UI, aesthetically pleasing yet functional, enables smooth navigation, exploration, and interaction with surroundings.This product connects complex geographical data with an intuitive user interface, making it essential for contemporary digital solutions (Studio by UXPIN, n.d).

Figure 5 : Completely redrawn University of Hull Map with color coded areas to show buildings, grass and parking slots in order for user to be able to navigate their presence. The map will function as a standalone navigation tool when viewing a 3D model. Collecting these objects fosters a strong determination to acquire as many as possible.

References

Adobe, n.d. Adobe Color [Online] (n.d.) Available at : https://color.adobe.com/create/color-wheel [Accessed in 15 April 2024]

Figma, n.d. Icon Designer – Shared Library Ready [Online] (n.d.) Available at : https://www.figma.com/file/89wnqK3B4w9WYc9eqTWkpw/Icons-Desinger—Shared-Library-Ready-(Community)?type=design&node-id=1-5812&mode=design&t=kyArtte0ozxCQkds-0 [Accessed in 20 April 2024[

Josh Howarth, EXPLODING TOPICS, 6 December 2023. iPhone vs Android User Stats (2024 Data) [Online] (n.d.) Available at : https://explodingtopics.com/blog/iphone-android-users [Accessed in 15 April 2024]

Studio by UXPIN, n.d. Map UI – The Most Popular Layouts and Design Tips [Online] (n.d.) Available at : https://www.uxpin.com/studio/blog/map-ui/#:~:text=Balancing%20aesthetics%20with%20functionality%2C%20a,crucial%20for%20modern%20digital%20products. [Accessed in 22 April 2024]

University of Hull, n.d. UNDERGRADUATE [Online] (n.d.) Available at : https://www.hull.ac.uk/study/undergraduate [Accessed in 20 April 2024]