Closed bobbinrobyn closed 9 years ago
@Snugug: No rush, but when you get a chance, will you assign this to me?
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
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.
That's fine... It shouldn't block. We need to have a formal review with Brad, though.
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.
Can we change this to in progress?
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.
Hmmm... How are you imagining these in context? Maybe we could see that.
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.
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.
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.
There are many other things to consider, such as:
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.
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
@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!
Is it the kind of thing that would appear in a call-out box when we reference a principle on another page?
Unsynthesized user research is here: https://releaseblueprints.ibm.com/display/WDA/Design+Principles Synthesis & a new iteration is coming in the morning!
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.
If copy is final, please work on getting it into a PR and out of the Wiki
Okay, awesome. I'm meeting with @ryanbrownhill tomorrow to make that happen.
@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.
This is where I'm heading with the final visuals for the principles. Any thoughts, @channel?
How does this all work responsively? I'd love to see us thinking more mobile-first with everything we're doing
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?
@britanyponvelle FTW! I love that idea. @bobbinrobyn let's discuss.
I love the colors here @bobbinrobyn ! Very nice :)
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
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.
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:
I think we should keep the caption text same color as the others (instead of the teal)
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!
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
Provide intelligent defaults and positive feedback to reinforce cognitive behaviors and gradually adjust the user’s habits.
Example: Set intelligent defaults
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
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.
This looks great! @poofichu any chance of getting this into the prototype before 4pm today?
Adorable comment @joshkimmell. This will happen tomorrow.
:+1:
:+1: via PR #166
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.
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?
I am leaning toward homepage - as I don't think adding another page just for a paragraph is the best idea.
@IBM-Watson/design-acceleration This is ready for :+1:!
:+1: for me
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.
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:
We can test these this week.
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?