ASSESSMENT OF PDB SITE -...
Transcript of ASSESSMENT OF PDB SITE -...
![Page 1: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/1.jpg)
ASSESSMENT OF PDB SITE User Interface User flow Design elements Jesse Woo
![Page 2: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/2.jpg)
Content • Design philosophy • Design inspiration • First impressions • Some elements on PDB sites to start tackling
![Page 3: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/3.jpg)
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.
![Page 4: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/4.jpg)
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
![Page 5: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/5.jpg)
Design Inspiration Sites that document, categorize and is a UI pattern repository
![Page 6: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/6.jpg)
Design Inspiration Personal experience with various products
![Page 7: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/7.jpg)
![Page 8: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/8.jpg)
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?
![Page 9: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/9.jpg)
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
![Page 10: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/10.jpg)
Navigation Focus
Left Side Navigation
Expanded. Too many links. Should collapse it.
Overwhelming given our short term memory holds
only 7 items!
![Page 11: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/11.jpg)
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
![Page 12: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/12.jpg)
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
![Page 13: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/13.jpg)
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.
![Page 14: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/14.jpg)
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
![Page 15: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/15.jpg)
Content Ideas
Carousel
Grouping of Info
![Page 16: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/16.jpg)
Customization Option
Freedom to Customize
![Page 17: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/17.jpg)
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.
![Page 18: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/18.jpg)
Color Palette
![Page 19: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/19.jpg)
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?
![Page 20: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/20.jpg)
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.
![Page 21: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/21.jpg)
Search Solutions
![Page 22: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/22.jpg)
![Page 23: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/23.jpg)
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.
![Page 24: ASSESSMENT OF PDB SITE - jessewoo.github.iojessewoo.github.io/pdf/rcsb/20130531_InitialAssessment.pdf · Digging into the Details Issues to Address: Homepage • Navigation • Content](https://reader033.fdocuments.in/reader033/viewer/2022050214/5f605d4ce5d64247e14180fa/html5/thumbnails/24.jpg)
Advanced Search Ideas