#30 - Mental Models

When you're designing, there will be many occasions when you don't know how to fit some element of the interface into the layout, where do I put the component, what do I call this label, what logic am I going to use for the back button; here comes the topic of the week, the mental models.

A mental model is nothing more than the users' preconceived idea of how a system works, what will happen if you press the button, or where that blue link will lead. Here it is especially useful to stick with Jakob's Law idea, because it is extremely important, "Users spend most of their time on other sites, and they prefer their site to work in the same way as all the other sites they already know".

If they have a preconceived idea about, for example, that a link with the typical icon of opening in new tab opens in the same, it will create unnecessary frustration and confusion to the person who is using the system, even losing credibility and perceived value, leading to the loss of the user after several repeated actions.

Testing must be done to understand the mental model of the users, since there is a serious gap between the mental model of the designer or a business person, when compared to the final user. This is the reason why when we innovate too fast and suddenly, it creates that immediate rejection, since the user's time investment to learn how the system works is perceived as high, that he prefers to go to another more "conservative" page.

In order for the user's mental model to fit the system, we simply have to define personas, validate them with testing, and iterate the design based on the feedback, with a special care for the information architecture, matching the labels and layout with the user's experiences.

Articles & Ideas

Design To Engineering Handoff‍

Asa Product Designer, I’ve been able to collaborate and partner with many product teams. Typically, my support role is focused on ensuring that mockups are cleaned up and pixel-perfect before being given to product engineering. Jeremy D.‍

How to Propertly Apply Jobs-To-Be-Done to User onboarding‍

Hope you were able to avoid most of Black Friday’s dark patterns. 😅 2020 has been… hectic for a lot of us (to say the least)... So we decided to take a breather and try meditating with Headspace for a change. growth.design‍

The only Figma plugins you need for your workflow‍

In this article I have tried to list the best ~3 Figma plugins for every step in a typical design process and the reason I believe why these plugins undeniably make Figma the best tool for end-to-end collaboration for *all* stakeholders. Pranava Tandra‍

Build Products That Solve Real Problems With This Lightweight JTBD Framework‍

In my role leading product teams as a part of Facebook's New Product Experimentation, we’re focused on that hazy “0 to 1” stage of building, where ideas are unproven and products are in their most nascent stages. My job is to distill the complicated unknowns of a big, disruptive vision into clear, actionable steps. Sunita Mohanty‍

The 6 Steps to Roadmapping‍

To create a roadmap, inputs are gathered and clustered into themes, then prioritized and visualized. This article covers 6 key steps to roadmapping that can be applied to any scope or industry. Sarah Gibbons‍

User Control and Freedom (Usability Heuristic #3)‍

Users often make mistakes or change their minds. Allow them to exit a flow or undo their last action and go back to the system’s previous state. Maria Rosala‍

Information Scent‍

Information foraging explains how users behave on the web and why they click certain links and not others. Information scent can be used to analyze how people assess a link and the page context surrounding the link to judge what's on the other end of the link. Raluca Budiu

Products

Sidekick‍

Sidekick is a revolutionary new work OS based on the Chromium browser. Designed to be the ultimate online work experience, it brings together your team and every web tool you use – all in one interface‍

Spline‍

A design tool, for 3D. Easily create and publish 3D web experiences. Build and iterate fast with production-ready results.‍

Archbee‍

All-in-one documentation tool: Documentation sites, team wiki, developer guides, SOPs,API documentation, knowledge base, diagrams & notes‍

Roy‍

A tiny & delightful color picker for designers. Save time with one-click to copy, choose the perfect pixel when you hold control key, keep it simple with hex values only and declutter your dock with one less app‍

Icons EOS‍

Open source, customisable, including all of Material icons.‍

Vzy Icons‍

1000+ SVG icons for unlimited projects. Customise and download in outline and solid styles.‍

Nappy‍

Beautiful photos of Black and Brown people, for free.I love Unsplash, Pexels, and Shot Stash, but one of the things I’ve noticed is that all of their content could use a little more diversity. As an influencer mgmt agency for black and brown creators, we’re very intentional about cultural representation in the work that we do.

Remote Jobs

Baymard Institute - E-Commerce UX Auditor (full-time remote position in EMEA)‍

Baymard Institute uncovers what designs cause usability issues, how to create “State of the Art” e-commerce experiences, and how your UX performance stacks up against leading e-commerce sites.‍

Springboard - Mentor - UI/UX Design Course (Part-Time/Online) ‍

Springboard runs an online, self-paced UI/UX Design Career Track in which participants learn with the help of a curated curriculum and 1-1 guidance from an expert mentor. Our mentor community is the biggest strength of our programs with a Net Promoter Score rated as world class. ‍

Mango Languages - Senior UX Designer (retired)

Find out how our language learning software can help your or your school, library or business.