Design principles

[bobbinrobyn]

• [x] Write design principles
• [x] User test written principles
• [x] Choose headings/titles for principles
• [x] Prototype concepts for visual examples
• [x] User test visual examples
• [x] Synthesize research & iterate
• [x] Write short description for principles
• [x] Write intro paragraph for principles
• [x] Create final visual assets
• [x] Format text & media for production

[bobbinrobyn]

@Snugug: No rush, but when you get a chance, will you assign this to me?

[bobbinrobyn]

This won't all be done by March 24. Should I change the scope or do we want to push it to a later milestone? @Snugug @joshkimmell

[Snugug]

If it doesn't block other work we can push it to RC1 but not further than that

On Mar 12, 2015, at 2:08 PM, Robyn Hammond notifications@github.com wrote:

This won't all be done by March 24. Should I change the scope or do we want to push it to a later milestone?

— Reply to this email directly or view it on GitHub.

[joshkimmell]

That's fine... It shouldn't block. We need to have a formal review with Brad, though.

[bobbinrobyn]

After getting feedback from Brad, I brainstormed a few different ways to write the taglines. I'll pick back up on the visual examples on Friday, after our color decisions are wrapped up.

[bobbinrobyn]

Can we change this to in progress?

[bobbinrobyn]

First few sketches of visual examples for the design principles. They're supposed to be pretty abstract. They could eventually have motion, if it makes sense for the content and would benefit our users.

[joshkimmell]

Hmmm... How are you imagining these in context? Maybe we could see that.

[bobbinrobyn]

Here's all the visuals I mocked up! I'll upload them by principle.

Principle 1: Introduce Cognitive Clarify Watson’s capabilities with hierarchy, copy, and interactions to help set appropriate user expectations. Educate the user throughout the experience without interrupting his or her workflow. Integrate additional explanation into the visual hierarchy as a secondary focus so that it doesn’t get in the way of more experienced users. Reinforce cognitive behaviors with intelligent defaults and positive feedback in order to gradually adjust the user’s habits.

[bobbinrobyn]

Principle 2: Inform Interactions Present insights as quickly as possible, with an indication of accuracy or obscurity.

Demonstrate Watson’s heavy lifting with visual metaphors and indications of the actions Watson takes.

Increase transparency when it helps the user trust the accuracy of the insights Watson returns.

Display Watson’s insights as the user needs them, so that interfaces aren’t cluttered or overwhelming. This technique, known as progressive disclosure, improves usability by displaying only the relevant information needed to complete a given task.

[bobbinrobyn]

Principle 3: Offer Control Denote a clear best path through the experience, while accommodating alternatives and seamless undos if the user wants to try something else.

Support users with visual design and copy that indicate collaboration or a conversation. Demonstrate that users learn from Watson, and at the same time, Watson learns from them.

Provide personalization options that are both manual (performed by the user) and automatic (performed by Watson). Gather user information and preferences to apply to the experience, as well as enabling a cycle of continuous feedback between Watson and the user.

[bobbinrobyn]

There are many other things to consider, such as:

• What would these look like without a device in the image?
• How will we display multiple images for a sub-principle?
• What will the final copy be for each of the principles and sub-principles?
• If the image is showing a recommendation for copy, should there be an interface at all?
• Would it be helpful to use the same interface (e.g. the orange phone UI) for all of the sub-principles under one principle?

Feel free to give me your thoughts and suggestions. I drafted these images specifically to be able to test with users next week, so there will still be lots of iteration before they're final. And hopefully some visual design skillzzz from the talented @britanyponvelle and/or @poofichu.

[bobbinrobyn]

Thanks to @poofichu for making this rocking prototype! I'm user testing the principles this afternoon. http://pages.design.ibm.com/tremblay-us/ibm-watson-design-library/master/dist/design_principles.html

[bobbinrobyn]

@Snugug & @kathrynmcelroy: Did y'all do a content model for this? Could y'all refresh my memory on how long the "short description" needs to be and an instance of where it might appear? Thanks!

[bobbinrobyn]

Is it the kind of thing that would appear in a call-out box when we reference a principle on another page?

[bobbinrobyn]

Unsynthesized user research is here: https://releaseblueprints.ibm.com/display/WDA/Design+Principles Synthesis & a new iteration is coming in the morning!

[bobbinrobyn]

Copy for the principles has been updated in the wiki: https://github.com/IBM-Watson/design-library/wiki/Design-Principles

I'll add the synthesized research to the wiki ASAP.

[Snugug]

If copy is final, please work on getting it into a PR and out of the Wiki

[bobbinrobyn]

Okay, awesome. I'm meeting with @ryanbrownhill tomorrow to make that happen.

[bobbinrobyn]

@channel: I added short descriptions and the intro paragraph to the design principles. I also tweaked the copy just a little bit. It would be great if you can read over these and give me any last feedback; otherwise, I'm going to call it done.

[bobbinrobyn]

https://github.com/IBM-Watson/design-library/wiki/Design-Principles

[bobbinrobyn]

This is where I'm heading with the final visuals for the principles. Any thoughts, @channel?

[Snugug]

How does this all work responsively? I'd love to see us thinking more mobile-first with everything we're doing

[britanyponvelle]

If we added an indicator like (1) to the image and (1) to the caption, instead of a connecting line, we could move the caption underneath the visual example for small screens?

[poofichu]

@britanyponvelle FTW! I love that idea. @bobbinrobyn let's discuss.

[britanyponvelle]

I love the colors here @bobbinrobyn ! Very nice :)

[Snugug]

I'm concerned we're veering towards one-off pages for everything and will need to manage each of these by hand. That's a very tedious maintenance process and will make it harder to quickly and easily update content.

Let's get this in to browser and see what its like

[Snugug]

Always make sure you're referring to the Content Models and thinking about how we go from a representation of our content to the rendered view in a predictable way.

[kathrynmcelroy]

These look great! I really like how you've simplified and clarified the meaning. It's much easier to read and resize as needed. :+1:

[britanyponvelle]

I think we should keep the caption text same color as the others (instead of the teal)

[bobbinrobyn]

Thanks for all the feedback. To @Snugug's point about responsive, that's totally fair. The first round of images I did were designed mobile first, but didn't do well in user testing because they weren't particularly legible. So this second round was an attempt to improve readability. I'm going to try out @britanyponvelle's idea, which I think will work great!

[bobbinrobyn]

Here's an example of what a sub-principle might look like:

Clarify Watson’s capabilities with hierarchy, copy, and interactions to help set appropriate user expectations.

Example: Clarify with content

1. "Remember that Chef Watson eats data, not real food. Use your own judgment when preparing these dishes."

[bobbinrobyn]

Provide intelligent defaults and positive feedback to reinforce cognitive behaviors and gradually adjust the user’s habits.

Example: Set intelligent defaults

1. Based on the input data, this is a graph comparing REVENUE and TIME.
2. "Choose a different variable to plot."

[bobbinrobyn]

Okay - here are the final images. I'll also drop them in the wiki so you can see them in context.

Introduce Cognitive

Inform Interactions

Offer Control

[bobbinrobyn]

Wiki is updated with the final copy & images: https://github.com/IBM-Watson/design-library/wiki/Design-Principles. @poofichu is going to work with me tomorrow to get it into the prototype and I'll talk to @ryanbrownhill about doing a pull request.

[joshkimmell]

This looks great! @poofichu any chance of getting this into the prototype before 4pm today?

[poofichu]

Adorable comment @joshkimmell. This will happen tomorrow.

[britanyponvelle]

:+1:

[ryanbrownhill]

:+1: via PR #166

[bobbinrobyn]

Unfortunately, not done :disappointed:

I'm going to redo the files so that each principle lives on its own page, given the decision we made about IA in #93. Then we should be good to review & close this today.

[bobbinrobyn]

Currently accepting ideas on where this paragraph should live:

"Watson design principles are actionable guidelines that inform the design and development of cognitive software products, in order to provide consistently excellent experiences for users. They are meant to be applied in conjunction with the IBM Design Language best practices and principles. These design principles are explicitly related to Watson, but some principles may not apply to every use case."

When all the principles lived on one page, this was at the top as an intro paragraph. I think it's still important content, but it shouldn't be repeated on every principles page. It could live just on the first principle's page, but now the title of the page is the name of the principle (i.e. "Introduce Cognitive"), so what heading would this paragraph go under?

Alternatively, could it live on the home page? Or do we need a whole "Introduction" page for the design principles?

[ryanbrownhill]

I am leaning toward homepage - as I don't think adding another page just for a paragraph is the best idea.

[bobbinrobyn]

@IBM-Watson/design-acceleration This is ready for :+1:!

[ryanbrownhill]

:+1: for me

[Snugug]

If we're going to have that kind of paragraph for principles on the homepage, we should have one for guidelines and UI patterns as well there.

[bobbinrobyn]

Yeah, upon further reflection, I don't think it should go on the homepage. @joshkimmell has a good thing going with a one sentence, high-level overview of Principles on the homepage. So now I think the options are:

1. No paragraph
2. Display paragraph on the first principle's page ("Introduce Cognitive")
3. Display a shorter version of the paragraph on every principle page.
   4. Display on the homepage
   5. Display on a separate introduction page for Principles

We can test these this week.

[britanyponvelle]

I think the last sentence is the most important part of the paragraph

Watson design principles are actionable guidelines that inform the design and development of cognitive software products, in order to provide consistently excellent experiences for users. They are meant to be applied in conjunction with the IBM Design Language best practices and principles. These design principles are explicitly related to Watson, but some principles may not apply to every use case.

The other content is basically re-iterating the "Engage your users with cognitive experiences." section on the homepage, so I think we can leave it out. Perhaps we can include that sentence in each page as a type of disclaimer?