Photoshop Layers and Mental Model

I might not be that organized, but when creating a design in Photoshop, I’ve learned that it would be easier later, to update or just to revisit the design, if I organize the layers to match the visual appearance of the elements on the screen. The app header for example, would be placed at the top of other layers. This is how I make sense of the world. Header = at the top. Footer = at the bottom. This is my mental model.

Photoshop Layers and Mental Model

Another story about Visual Designer freelancer. Sometimes I need to make small (or even BIG) adjustment to the design, so I always ask for the PSD to be shared, and I can just quickly do the update by myself. I was very frustrated one day, when I opened a PSD file with totally messy layers. No naming (only Group 1, Group 37, etc), no structured folders, it’s just a mess. At least he should have put these folders: Header, Content, and Footer. This will also help other users (like the developers) to browse the design file.

Back to the mental model. The gap between users mental model and the designers mental model could cause usability problem. That visual designer freelancer might have his own way of structuring the elements in his PSD, but when it reached me, it’s confusing, and also it didn’t follow the way Photoshop treats layers, that the top layer in the layers list will also be on top of other layers in the canvas. In case of mental model mismatch, you have two options. I copied this from Nielsen’s blog post about mental model:

  1. Make the system conform to users’ mental models — assuming most models are similar.
  2. Improve users’ mental models so that they more accurately reflect your system.

The easiest, I think, is to test it with the user to observer if there’s any mental-model mismatch. Ask them to think aloud when interacting with your app. This will give you insights into users mental model.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s