-
Notifications
You must be signed in to change notification settings - Fork 39
Visual Design Feedback
Britany Ponvelle edited this page May 6, 2015
·
16 revisions
6: Feedback from 6 designers on visual design of the prototype
- Too much grey overall. Incorporate more color to break up text blocks.
- More space is needed for gutters (especially in places where there is text right next to a large image: ex. Principles)
- Resources panel looks too similar to links/ tab pattern that IBM Design uses. It feels like there should be other tabs.
-
figuresize text in Example content type should be the same/similar size as the text above it
“It’s smaller so it feels like you don’t want me to read it" - Sub nav needs more space between links. Bold (active state) makes the space feel tight
- More visual examples to support content (specifically Grids, Logo vs Avatar, and Accessibility Animation)
- Larger and more detailed visual examples that relate to one another (Accessibility/ Animation)
- Looping animations should have a "pause" option, like guidelines specify.
- Remove thick underline from the resources panel to differentiate from common tab patterns
- Add a larger line height to links in sub nav
- Increase gutter space between columns
- Make looping gifs into a video so users can "pause"
- Remove teal from Accessibility animation so it doesn't compete with interface colors
- Add more space underneath statement of intent on Principles page, or add a sentence
- make
figuresize text in Example content type the same/similar size as the text above it
- Make visual examples larger and add more detail
- Give more context to Accessible animation example
- Visualize more content on Grids and Accessibility page (This will help to add more color to pages)
- Break off "ecosystem partners" content into it's own page in branding (since it is a very text heavy page)
Overall:
- Heavy use of grey weighs down the design and makes it feel muddy/ dull. More contrast is needed. Links are too disruptive (teal, bold, and underlined). Only two distinctions are necessary.
Home page:
- there isn’t enough content in the background watermark to create a visual line, so it just appears cut-off right now
Resources Panel:
- Styling is too close to tabs/ active links
Accessibility page:
- Smaller text under the description doesn’t make sense because it feels less important visually, but the content is just as important.
- “It’s there, but it doesn’t want me to read it"
- The numbers shouldn’t be teal since they are not apart of the example image
Footer:
- links are not on the same line
Principles:
- Numbered text is confusing and doesn’t connect well to the text above it
Animation page:
- "Don’t understand the animation or what it’s doing, so not sure how to connect it to a design"
Overall:
- The structure is good; easily digestible
- "I want to see more visual examples of actual interfaces". Ex: “Inspiration” section of IBM Design
- Would like to see an example that she can hover over and identify multiple elements (H tags, link, etc.)
Home page:
- Multiple titles are confusing (“Design Watson Experiences” and “What is Watson?”). Not sure what to look at first.
Sub nav:
- Bold links in the sub nav feels too tight
Design Principles:
- "Not sure what you want me to do with the principles"
Bottom Nav Buttons:
- They are too big
- _“I want to click through to the next section” _(End of Guidelines> UI Patterns)
Wordmark and Logo:
- Show a visual example of an appropriate usage of logo
Overall:
- Columns need more breathing room
- Too much space between headings and paragraphs
Resources Panel:
- Styling is too close to tabs/ active links
- “This feels strange, like there should be other tabs here."
Grids Page:
- Too much text. Would like to see more visual examples.
- Pull quotes are nice
Home :
- Too much text
- Links at the bottom to main sections feel redundant
Principles:
- The smaller points should be closer or the same as the descriptive text above it
- There should be more space beneath the overarching statement to add emphasis
- The text in the examples is hard to read. Feels like a mistake.
Typography
- Start with a base/ minimum size and work your way up
- Rules about a max number of type sizes on one page
Wordmark
- Align the examples to the title, not the icon so it feels more refined
Overall:
- Color is used sparingly so it’s seems like it is being used purposefully, instead of decoratively
- Color is used when directing attention
- Thinks the use of color is successful if meant to be primarily for a functional site meant for teaching and reading. Not successful if it is meant to convince people to build things with Watson. (not flashy)
Homepage:
- Content is weird when it is not full width
- If you made the content full-width it would be too long
- Suggests containing the content into two columns (like the sections that link to other pages)
Sub nav:
- feels too tight
Bottom nav buttons (old):
- lots of orange
- feels like something has gone wrong
- lots of color here compared to the main content on the site
Bottom nav buttons (new):
- the use of color in this version feels more in line with the look and feel of the site
Principles:
- not much space around the images. They need more breathing room
- hard to connect numbers to images
- “My eyes go straight down the images, and not to the text"
Overall:
- "Orange and teal color palette seems more serious than the airy/ cutesy blue and green palette"
- Primarily scrolling back to the top to go to different sub-sections
Principles:
- wants the images to be larger and have more details
- wants to see a real interface in action to understand elements
Accessibility:
- the level of detail in the visual example is nice
Side Nav:
- overlooked initially
- likes the subtle appearance because it’s not “in your face"
- thinks the solution for small screens is successful
Back to Top:
- likes that there is an option to quickly jump to the top of the page
Components:
- As a designer not familiar with coding, seeing a rendered example of an element is helpful
Overall:
- Links are easy to distinguish, which is something that has been hard to find on Watson site’s using the old blue
- There is a good flow and implied reading order, but breaking up the pages so much makes some content feel siloed
- World like to see more visual examples that build on/ relate to one another
- Everything is clear and informative individually, but missing a place that ties everything together
- “All of the details feel right, but I am missing the holistic view"
Suggestions:
- Start with the same grey interface (like in Principles) and build on that throughout the site by adding each element.
- Relates it to a Construction document: “Here is what the building looks like (holistic view), and here are the walls, floors, etc of the building (drilling into the details)"
Color:
- Color is fine. Not distracting
Typography page:
- Makes sense that there is a lot of text here, but it feels like too much
Principles:
- Text is easy to digest. Points and clear. Appreciates that there very specific examples.
- Space underneath sub nav is awkward
- “Offer control” example #3 is on top of light grey box, while everything else with numbers is dark grey
Accessibility:
- "Shouldn’t there be a way to pause this animation?"
Guidelines:
- content on Accessibility page doesn’t feel as digestible as content in Principles (very small chunks of information)
Grids:
- "Shouldn’t there be a way to pause this animation?"
- Too much text at the beginning to the page. I want to see visuals before I scroll.
- “I have to scroll to see the interesting stuff!"