ASSESSMENT OF PDB SITE User Interface User flow Design elements Jesse Woo

Content • Design philosophy • Design inspiration •  First impressions • Some elements on PDB sites to start tackling

Keeping it Simple • Actions for a user has to be intuitive. •  Info to a user has to be digestible, not an overload. • Keep it simple, clean and clear. •  Less clutter, more thought into figuring out user flow. • Design is more than aesthetics, but it should make a

person feel like the product is intuitive and easy to use, and satisfaction is maintained.

Don’t work in a closet… •  In order to find latest trends, latest UI patterns, we can’t

work inside a closet and be in the dark trying to figure out things on our own

• We have to have inspiration from better designers, better interaction experts •  Research, read, and experiment with their code

• And also personal experience using “solid” products

Design Inspiration Sites that document, categorize and is a UI pattern repository

Design Inspiration Personal experience with various products

PDB First Impressions • Blurring your eyes, what stands out? Nothing - too much

links and content. • No clear action for users.

•  User gets dropped onto this website, am I suppose to read articles or search?

•  With content, what’s important to read first?

Digging into the Details Issues to Address: Homepage

• Navigation • Content clutter – PDB 101 link to PDB • Color palette, Call to Actions • Customization • Search / Advanced Search / Browse

Navigation Focus

Left Side Navigation

Expanded. Too many links. Should collapse it.

Overwhelming given our short term memory holds

only 7 items!

Navigation Issues •  Problems with vertical navigation

•  It’s a waste prime screen real estate. •  Images of protein structures can use more space. Larger images “GRAB” the

attention of people, example is the new redesign of Flickr •  Left side navigation for websites are virtually ignored

•  Vertical navigation great for social media platform, not for websites with updated content

Navigation Solutions Some Inspirational Sites

•  Solution: Overhaul navigation, implement a horizontal top navigation bar with hierarchical submenus with a strip for important notifications like large structure molecules.

•  Descriptive, grouped and concise navigation with short labels

Content Issues • Similar content not group effectively. •  There doesn’t seem to be any breathing room.

•  Suffocating and overwhelming to read.

• Everything has a box and is bolded. Seems like everything is highlighted. •  Vary font size to bring about hierarchy.

• Effective use of space.

Content Issues • No call to action to visit PDB101. • No context as to what the MotM icons are. •  There is no “action” of dynamic text.

•  Try a carousel unit.

• No mention of social media platforms

Content Ideas

Carousel

Grouping of Info

Customization Option

Freedom to Customize

Customization Issues •  Problems with customization

•  It will mess up any usability we DEFINE. •  Reality, users don’t want to invest time into customization or the opposite,

users go overboard. It can become ugly and inconsistent. •  We should define the GOALS of the site and simplify it the work flow. •  Case in Point: Facebook vs. MySpace, MySpace allowed users to do

whatever to the design of their profile page, BUT that’s the reason it was so unruly. Facebook kept it neat, clean and organized.

•  Solution: Remove customization. We need to work on defining the goals for users and cleaning up all the clutter.

Color Palette

Colors Palette Issues •  Monochromatic – too many shades of blue, not easy to follow visual hierarchy

with blur of colors. Try a different set of palette. •  Buttons – what’s the more important action you want users to follow up with

when they come to your page. Take Google’s approach to color coordinate the button – one color should define a certain action. Or Twitter bootstrap.

•  Larger images of protein will give the current monochromatic page more lift in being drab.

•  Blur your eyes, what stands out? Nothing. Users have to TRY hard to figure out what to do, what to read. What action do you want users to take, not really defined?

Search •  Current search bar DOES grabs attention, thanks to Alex! •  Search option should be grouped more effectively.

•  Instead of having options be tabs, what about using form input? •  Monochrome still. No clear hierarchy of information. •  Clicking on Advanced Search bring you to a relative “empty page.

Search Solutions

Advanced Search Issues • Navigation

•  With the default Advanced Search state, the left navigation gives the entire page an “eye sore”. So much white space

•  There’s hasn’t been effort to think about the user interface.

Advanced Search Ideas