UI Practicum #7. How to Optimize a Workspace (Video Teardown)

Published July 22, 2016 by Jane Portman
Categories:

• Articles
• UI Practicum
• Video

We face multiple challenges when designing workspaces. How do we keep it clean while making it functional enough? How do we decide which features are important?

Today I’m doing a video teardown of Bookagram, an iPhone app created by my friend Goran Blagus. It helps users quickly design printable photo books. Watch the video below to see how the app works, and how we can make it better.

Watch the video on YouTube

Here’s a wireframe illustrating what the redesigned workspace could look like:

What about web applications?

Mobile apps and web apps follow the same UX principles. There are just more constraints on screen real estate, and more fun is allowed with touch gestures. So if you’re designing a workspace for your web application, the steps would be the same.

Practicum

When designing a workspace environment, follow these steps:

1. List all user controls and possible actions.
2. Figure out which of them are critical to the main workflow, and which of them are used less frequently.
3. Add prominent controls for the important features, or embed them intuitively into the workflow (like a plus icon on the back cover to add a new page).
4. Pack up remaining features into a simple context menu.
5. “Smart” gestures and tricks are fine. But make sure they’re duplicated in the menu. Don’t assume everyone knows about them.
6. Make sure there’s an obvious way to exit the workspace.
7. Make it transparent to the user what will happen to their work when they exit.

Enjoyed the teardown? Please share this Tweet. Want to learn more? Welcome to get your copy of The UI Audit book here.