top of page

I Used AI to Analyse My Website Design: AI in User Experience

Writer's picture: Yen Yu LinYen Yu Lin



Source: Pexels


User interface design (UI) strongly influences user experiences (UX), and UX is the root of digital marketing. Peter Morville’s user experience honeycomb suggests that there are seven aspects of the user experience. These aspects are useful, desirable, accessible, credible, findable, useable, and valuable. These aspects encourage digital marketers to build platforms that are easy to navigate and have well-designed aesthetics.


Exhibit 1: User’s experience with honeycomb


Source: Peter Morville



To achieve these 7 aspects, marketers would spend loads of money just to research the user experiences on their platforms so that they could turn these ‘users’ into customers. But what if there is a way to predict the routes that users take to engage with content?


Attention Insights is a cutting-edge AI tool that allows people to analyse content on desktop and mobile, marketing material, posters, packaging, and even shelves. When photos are uploaded, it outputs heat-maps to show how users’ attention is distributed, the percentage of attention that may be given by the users in different areas, as well as a clarity score, showing how clear the design is for first-time visitors. With this AI tool, designers and marketers can gain insights into predictions of user attention, allowing them to prioritise and emphasise elements in their content.


In this article, I will first take a closer look at Attention Insights, then talk about what else AI can do to help digital marketers improve the user experience.


To try out the tool, I took a screenshot of the home page of my site and uploaded it. Exhibit 2 shows the heat-map results. Overall, the heat-map shows that most of the elements on the page attract attention. Starting with my logo in the middle, the banner on top of the website, which promotes my new book, and the buttons at the bottom of the page, which link to social media and other pages As good as it seems, it has a very low clarity score of 17%. This means a new user to the page would have ‘severe difficulty’ using or navigating the page. Basically, the AI tool uses an algorithm that takes into account the word count, text size, colour contrast, colourfulness, images, and size of the elements.

Exhibit 2


The Home Page of my Website

With the heat-map results, I went back to my website to make additional changes. According to the analysis, the page was very hard for users to navigate because the colour was dull and there was no text or instructions to help users navigate the website. After making changes, as shown below, the clarity score increased significantly, with a high score of 73%. Overall, I think this tool is a very powerful, user-friendly, and helpful tool for digital marketers to predict and review their designs before publishing them.


Exhibit 3


A refined version of my home page



With AI technology expanding, this tool is just the tip of the iceberg.


Since UI/UX design involves a lot of repetitive tasks, generative AI can assist designers at all different stages of the design process. From generating ideas and product descriptions to generating colour palettes and work flowcharts, it can all be done in literally seconds.


From this AI tool experiment, it seems that AI tools are now capable of providing valuable information without the need to spend a huge amount of money on marketing research and customer analysis. It is certain that this technology will become part of the industry, and for now, it is worth trying out different kinds of AI tools to explore and learn what they can do and emerge with expertise in order to create the most user-friendly designs.


By Yen Yu Lin

Blogger


Edited by Samuel Golder

Founder and Editor



Bibliography

Chandak, A. (2023). 15 AI Tools Every UI/UX Designer Must Try - UX Planet. Medium. Retrieved from https://uxplanet.org/15-ai-tools-every-ui-ux-designer-must-try-a61c697649a2


Fard, A. (2023). AI UX Design: A New Way Of Designing. UI UX Design Agency for SaaS and Fintech | Adam Fard UX Studio. Retrieved from https://adamfard.com/blog/ai-ux-design


Thalion. (2023). UX/UI Design with AI - Prototypr. Medium. Retrieved from https://blog.prototypr.io/ux-ui-design-with-ai-75dd6d8b3e5c


Hannah, J. (2023). 7 Ways UX Designers Can Use AI to Their Advantage. Retrieved from https://designlab.com/blog/how-to-use-ai-as-a-ux-designer/


Kytra. (2023). Attention Insight Heatmaps | AI-Driven Pre-Launch Analytics. Attention Insight. Retrieved from https://attentioninsight.com/


18 views0 comments

Recent Posts

See All

Comments


bottom of page