Social Business User Experience blog
Jeff Schering 270000260U firstname.lastname@example.org Tags:  progressive_disclosure help documention embedded_assistance 1,479 Visits
In the technical writing world in general, and at IBM in particular, writers are becoming more involved in the software design and development process. We're beginning to embed product help directly into the product UI. Our goal is to eliminate the need for our clients to interrupt their work and go looking for help. No longer will separate, independent documentation be the only content that we deliver. The techniques that we use are Progressive Disclosure and Embedded Assistance.
IBM's own Andrea Ames presented these techniques to the Society for Technical Communication summit in May 2012. A blog post by Sarah Maddox (http://ffeathers.wordpress.com/2012/05/23/stc-summit-day-2-progressive-disclosure/) gives an overview of what Andrea said. I'm not going to give a summary of the summary; you can read Sarah's post yourself. But what I will do is give a quick example of what embedded assistance is and how it can make using software easier by delivering information when you need it and where you need it.
For example, in SmartCloud for Social Business, when you start a Community you must choose one of the access options. The options are Restricted, Moderated, and Open. In the old way of doing things, the options would be simply listed. But what do these mean? How do you choose? In the old way, you would have to first find the documentation, and then find the section in the documentation that contained the information. And that's if you even bothered to look; most of us would probably pick the best-looking option, cross our fingers, and hope for the best.
The new way is to add text to the option so that now you can quickly decide the type of access that you want for your Community. The options, as shown in the graphic below, are Restricted (people must be invited to join), Moderated (anyone in my organization can see content but must request to join), and Open (anyone in my organization can join).
Help should be easy to use, easy to understand, and easy to find, and there's nothing easier to find than text right there on the screen.
And although we've made a good start at this, we still have a ways to go. For one thing, it's a whole new way of working. Writers must work with the UX people to make sure that our content has a place, and also work with the developers to get the changes implemented. And like any new way of doing things, the transition is not without its challenges. People who are accustomed to working alone are now working together. Where before we only had to confer with colleagues who were familiar with our own domain (because writers spoke with other writers, designers with other designers, and developers with other developers), we now have to speak to each other. And lets face it, designers and developers are just plain weird. They would no doubt say the same about writers.
But on the other hand, we all learn new things, and because of this our jobs are far from tedious. We also learn the problems and issues and stumbling blocks that our counterparts face in their day-to-day work. And there's a thread that binds us; we all have ambitious plans and tight schedules, and we all feel a little down when the schedule is just a little too tight or the plan just a little too ambitious, forcing us to let something go until the next release.
Overall though, for me this is a welcome change in my job description. Not only do I get a chance to influence the design of a product and the way that a product works, but I also get to think more and write less. And I like thinking!
Accessibility and what it means for your WebSphere Portal, Web Content Manager, and Web Experience Factory web content
rob flynn 060001N1DP email@example.com Tags:  web manager factory content accessibility 2.0 standards experience wcag portal 1,984 Visits
Web accessibility standards allow people with disabilities to use your web site or web application through the use of text cues, keyboard navigation, and mouse alternatives. Assistive technology, such as screen readers, interpret the information and instructions on the site. Web developers are looking now to the latest guidelines, Web Content Accessibility Guidelines (WCAG) 2.0 (http://www.w3.org/TR/WCAG20/#guidelines), to make sure their web sites are friendly and useful to all visitors. A web application that is compliant with WCAG 2.0 meets these standards of accessibility:
If you're interested in learning more, the following articles illustrate ways in which IBM developers built accessibility standards into our web development products. The articles also provide tips for you to keep in mind as you create your own web applications:
Developing accessible applications for IBM Web Content Manager 220.127.116.11 and 8.0
IBM Web Experience Factory WCAG 2.0 Compliance
Web Content Manager
Web Experience Factory
Do you use the activity stream in IBM Connections to stay up to date with the people and content you follow? If so, how valuable is the activity stream to you and your productivity? Tell us about your experience with activity streams in your work environment by taking a five minute survey.
Link to survey: https://www.ibm.com/survey/oid/wsb.dll/s/ag4e7
The survey will be open until March 13, 2013.
Thanks for your feedback!
Kerry Thompson 120000KVRM firstname.lastname@example.org Tags:  catalog portal template manager web content 2 Comments 4,800 Visits
A new version of Content Template Catalog (CTC) has just been released for IBM WebSphere Portal 18.104.22.168 and Web Content Manager 22.214.171.124. The Content Template Catalog is a suite of assets that simplify and accelerate the process of building a website. It includes common page templates, content types, and design elements -- making it possible to build a basic site very quickly -- with little or no customization.
Here's a sampling of what you'll get when you install Content Template Catalog:
CTC4 also comes with Site Builder, a new wizard that allows you to build a site in minutes, with all of the necessary pages, portlets, site areas, content and components, set up and ready for editing. You can also use Site Builder to create site templates for others to use, making it that much easier for non-technical users to create and manage web content.
Interested? Find out more here:CTC4 4 Documentation
CTC V4 Feature Overview (2-minute video)
Planning for IBM Connect 2014 is in full swing! I'm thrilled to have the honor, once again, to plan and manage the lab in Asia 4. As always, learning from the previous year, building on our successes. I want to share a few highlights with you for what's to come.
The first thing I want to mention is that we've changed our name. We used to be the User Experience (UX) Lab. This year, with an emphasis on IBM Design Thinking, we are now The IBM Design Studio.
When you visit the studio, you'll find designers from all of your favorite products to talk to, and interactive activities designed to help gather your feedback on what you like or don't like about our products and solutions. We know most of you will stop by the lab in the few moments you have between sessions, so we have designed our activities to be quick, easy, and fun! If you want to stay longer for more in-depth discussions, that's cool, too.
Also, back by popular demand: The Photo Booth!
I had so much fun taking your photos last year that I couldn't help but slide that into the plans again. This time with a twist! Designers are very visual creatures, so rather than just telling them how you feel about our products, you can show them! Let's call it an Empathy Booth! Take a photo with your favorite product's icon, or with an emoticon that describes how you feel about a product. If you want, you can give us a quote about what you love or don't love about our products. Of course, I had to test out the equipment, so here you go... See you at IBM Connect!
It's just a few short days now until IBM Connect, and we at the User Experience lab, located in the Dolphin hotel, Asia 4, are kicking it into high-gear with our planning and preparation. We can't wait to see you!
We have some fun things planned for you, but first, let's get some logistics out of the way...
Our stations will include:
Mobile Social Business
IBM Notes Social Edition
WebSphere Portal and Web Content Manager
IBM Smarter Workforce
IBM Smartcloud for Social Business
I'll refer you to my previous blog post for details on each station.
Many of our station activities are designed to be short, allowing for you to pop in between sessions. Of course, if you want to spend more time, we would love that!
Fun stuff and freebies:
When you visit the lab, we'll enter your name into our daily prize drawing, where you have a chance to win a pretty cool pop-up travel speaker that you can plug into your phone or MP3 player, and dance around your hotel room as you get ready in the mornings! (or is it just me who does that?). We'll also hook you up with a Koozie to keep your beverages cool (while supplies last). Who doesn't love a Koozie?
What's your Persona? photo booth:
Pick up a prop, scrawl a message on the chalk board or speech bubble, and step into our photo booth for a fun photo!
I'll share the
If you're feeling adventurous, you can let one of the lab staff members choose your props for you
Get social with us:
The official hash tag of IBM Connect is #IBMConnect,
ARIA landmarks are used on pages to structure the page for the blind user. Think of them as an outline for the page. The JAWS user is able to bring up a landmarks dialog, which acts as a table of contents, from which s/he can jump to any point in the page. That sure beats having to reading from left to right, top to bottom to find something s/he is looking for!
To pass accessibility requirements, everything in a page must be contained within an ARIA landmark (i.e. no orphaned content, please). For your convenience, I have listed them below. You will note that there is a generic "region" role which you can use to mark any part of the page that doesn't fall into one of the landmark categories. It isn't technically a landmark role, although I have included it in the list because it can be used when one of the more specific landmark roles doesn't fit.
As a developer, you'll need to add these roles to the relevant html tags on your page. As a designer, you should indicate to developers how you want your page to be structured.
The List of LandmarksClick on the landmark to be brought to the official description of it in the ARIA spec.
In most cases you need to specify a label along with the landmark to help the user determine its purpose. The ARIA spec contains the labeling requirements for the individual landmarks.
DeAnna Steiner 110000KQ1F DESTEIN@US.IBM.COM Tags:  web-content-manager getting-started wcm8 1,469 Visits
Getting Started with Your Web Experience is a collection of tutorials for IBM WebSphere Portal and Web Content Manager. Two levels of tutorials guide users from basic to more complex information. Each tutorial has a Next steps topic to guide the user to the next level of information.
Administrators and DevelopersThe tutorials are designed and developed for new administrators and developers. Unique terms are explained, concepts are presented visually, and procedures are simple and prescriptive.
Currently the primary audience is administrators that are new to IBM WebSphere Portal and Web Content Manager. However, the site is designed for growth and content is planned for other roles and products.
New TutorialIf you need to learn the fundamentals about Web Content Manger, check out the latest tutorial in the Getting Started with Your Web Experience site.
Make it BetterTell us about your experience with the tutorials and the Getting Started site: Open Survey
Coming SoonAdditional Learn the Basics tutorials are coming soon for Forms Experience Builder.
Contacts and CreditsIf you have questions or suggestions, please contact DeAnna Steiner (email@example.com).
New content brought to you by the Web Content Manager Information Development team:
Special thanks to John Hunt, Ryan Cook, and Vijay Baheti for all their hard work making this site a reality!
Ever scratch your head and wonder which firewall ports to open when you install IBM Sametime servers outside the intranet? Or which WebSphere Application Server ports to open? A new article in the Sametime wiki, Sametime Deployments and Ports to Open in Firewalls, answers these questions:
Patrick Commarford 06000165T3 firstname.lastname@example.org Tags:  hover sustained_hover ux popups 1,415 Visits
Need a better view of Uncle Harry’s hairy nose? Just hover over his thumbnail and you’re all set! Want more info about that remote-controlled beer pager without leaving your current page? Hover, friend. Hover.
It has become common practice for many sites and web apps to display certain types of “pop-up” UI elements on hover (mouse-over). For example, banner menus, contextual help, and preview cards (e.g., person cards, movie cards, etc.) all commonly display when users hover over a link, icon, thumbnail image or other UI element.
The good and the bad…
When using a mouse (or other device that controls cursor movement & interaction), this behavior can be really useful – allowing a single UI element (e.g., a link) to provide two different capabilities for hover and click. For example, it’s common that hovering over a person’s name link will display a person card; whereas clicking the name navigates to the person’s profile.
The biggest criticism to allowing hover to invoke pop-up UIs has been the complaint that these pop-ups can appear without user intent – for example, when the user drags their mouse across a screen and inadvertently passes a hover help icon, a link, or a banner menu. This complaint is especially strong (and valid) when the pop-up interferes with a user task or displays something that the user considers of no value (e.g., an advertisement).
Enter the sustained hover!
Sustained hover is just what it sounds like...we don’t display the pop-up on simple pass-by, but require that the pointer rest over the underlying UI element for a sustained period. This allows users to request the pop-up and usually prevents inadvertent display.
So, what’s the right delay?
We believe that delay times should range from 300-700 ms, depending on a number of factors including the likelihood that the user’s cursor will inadvertently come to rest on a particular UI element (largely determined by placement and density of pop-up UI hover targets) and user expectations driven from common industry practice.
For example, 300 ms appears to be the appropriate delay for invoking a banner menu. We have user data indicating that immediate display annoys users who intend to simply drag the cursor past the menu. However we’ve also found that if we set the delay to more than 300 ms users report that the menus feel “sluggish” (this is likely largely in comparison to the common industry practice of implementing zero delay or a very small delay).
On the other hand, object preview cards and the like are often invoked from lists or grids of data and are invoked on hover over thumbnails and/or displayed names of items. These types of elements often populate a fairly substantial portion of the UI; therefore it’s generally more appropriate to allow for a little longer hover. In this case, we believe it to be a best practice to also provide a subtle, but immediate visual change to the underlying element. This is a good way to tell the user that a pop-up is coming if he just holds his little horsies for a half second or so
Does sustained hovering solve everything?
Nope. Unfortunately, this technique does not prevent inadvertent display in the less-common scenario in which users rest their cursor on an active UI element. It also doesn’t tackle other concerns of hover-invoked UIs like how best practices for dismissal and how to handle touch screen interaction. I’ll look to blabber about those in a future blog post.
Two weeks ago, I described hows inserting a fraction-of-a-second delay before display can go a long way toward alleviating one of the major criticisms of hover-invoked pop up displays like pop-up cards, hover help, and banner menus. This week, I’ll blabber about dismissing hover-invoked pop ups via methods that avoid the “squirrely-ness” that users hate…
Say “no way” to auto decay
Don’t design and implement an automatic decay (i.e., timeout) behavior. The pop-up should display until the user initiates dismissal by moving the cursor. The automatic decay behavior is often problematic as the system is guessing when the user is done viewing the contents of the pop-up, rather than allowing the user to indicate this through action.
Define the right cursor boundaries
The pop-up will generally display on mouse-over of a relatively small underlying UI element such as a hover help icon or a text link. The pop-up itself will extend from that underlying element and consume much more space. To prevent accidental dismissal, it is important to treat the underlying element, the pop-up itself, a small area of padding around each, and all the space in between the two as active areas. As long as the cursor remains within these active areas, the display should persist.
Implement a delay before dismissal on mouse-out
Another good practice for preventing accidental dismissal is to implement a delay of 800 ms or so after mouse out before dismissing the pop up. This allows users to persist the display when the cursor momentarily traverses outside of the boundaries of the active area described above.
When to make your hover-invoked pop-up sticky
If the user indicates a desire to interact with the pop-up beyond simply displaying and viewing, it should become a more stable, and less transient, part of the UI.
Once the user interacts with the pop up by setting focus to a field or other control within the pop up, moving it (possible with certain pop-ups), etc, it should become sticky – i.e., the pop up should no longer close on mouse out, requiring a more explicit means of closing (e.g., click-off, selecting the close button, or selecting ESC). As a side note – pop-ups that are displayed on click should almost always require this level of explicit action to close.
Summary: 4 keys to avoiding “squirrely” pop ups on hover
The behaviors described here are important for all users and many of them are especially important to ensure a usable design for users with a range of physical and cognitive disabilities.
So, don’t be lazy. Laziness leads to squirrelly-ness…and squirrely-ness leads to unhappy users. We like our users to be happy
Jennifer Heins 120000FV6K email@example.com Tags:  adoption userexperience user lotusnotes 774 Visits
Amy Travis 1100006T7G firstname.lastname@example.org Tags:  smartcloud design ux socialbiz ibmconnect 2 Comments 1,919 Visits
I can't wait to talk to folks at IBM Connect about SmartCloud for Social Business. I'd love to hear from people who are using it, people who are thinking about it, and even those who aren't!
My colleague Ethan and I have got some great activities planned in the User Experience lab -- help us understand what's most important for you in the cloud, take a quick usability test, and give your feedback on some potential future design directions.
See you next week!
DeAnna Steiner 110000KQ1F DESTEIN@US.IBM.COM Tags:  getting-started portal-v8 portal 1,763 Visits
Amy Travis 1100006T7G email@example.com Tags:  communities ux engage features feedback 1,027 Visits
In the latest SmartCloud Engage release, you can now create three types of communities:
Currently, if you want someone from outside of your organization to join your community, it must be a restricted community. In other words, if your organization is "Company A", and you want to have a community that also includes people from "Company B", you can only do this if your community is Restricted.
I'd love to get some feedback on this from our SmartCloud Engage users! What types of communities do you create most often, and why? And would you want to invite people from other organizations into Moderated or Open communities?
Looking forward to hearing from you.
- Amy Travis (SmartCloud Design Lead)
Wiki users, we want to know how you rate your overall wiki user experience on the current wiki design. Visit any of the IBM WebSphere or Lotus product wikis and click the How was your visit? survey link located in the top right yellow section on any wiki Home page, or access the survey directly here. It only takes a couple of minutes to complete the survey. We look forward to hearing from you!
Amanda Bauman 060001EXX2 ABAUMAN@US.IBM.COM 970 Visits
IBM Collaboration Solutions product wiki users, we want your feedback! Which wiki tasks are the most important to you? How well are those tasks designed? Take our survey and influence future user experience work for the wikis.
At IBM, I work on a common front-end (html/css) code base for our Lotus Applications. As part of that work, I keep an eye on future trends. One of those trends is HTML5. Back when we began implementing it in our code, it was even newer than it is now. But it looks like it is here to stay, and there is a way to use it now without much risk, setting your code up to move into the future when even more HTML5 goodies are made available and accessible by the browser. Here is how we did it and the pieces we use.
Put the HTML5 doctype on your page
And this is all that's needed for the html element:
It's really that simple. Is that not cool? That's one doctype I can remember! It's the smallest doctype that all browsers recognize (or at least back to Internet Explorer 6). It is a strict doctype. But you can use either HTML or xHTML syntax, HTML5 views both as valid.
There is one funky thing I discovered about strict mode (before that I coded in xHTML transitional). In strict mode, an image, considered inline, includes 4 pixels of spacing at the bottom for the “descender.”
Sometimes this improves alignment. Sometimes it doesn't. Some workarounds:
Use HTML5 elements, where they make sense, to structure your page
Style using classes<p>We assigned classes to our html5 elements rather than styling them directly</p> <p>For us, this gives teams picking up our code the option to either convert over to the newer HTML5, or leave things as divs for now until they have more cycles. Maybe you don't need to do that for your project. But I kind-of liked doing things that way and it especially worked nicely as I was learning all the new elements and the best places to use them.</p>
Use IE conditional comments
Conditional comments are how you define the elements to Internet Explorer.
This will get IE to recognize these elements and for you to be able to style them directly, if you choose to mingle that in with using classes.
(These are the ones we used in our projects)
Define HTML5 elements you use in your style sheet<p>You'll have to define the HTML elements in your style sheet as display:block, so they will render correctly. Since the older browsers don't really understand them, they don't know what kind of display those elements should have. And so, we tell them... </p> <div><p align="> /*html 5 elements*/
Use ARIA to make things accessible<p>Accessibility compliance of HTML5 is incomplete in browsers, so you will still need to use ARIA. You'll note that the article element maps directly to the “article” role. And “nav” maps to the “navigation” role. Some day maybe HTML5 and ARIA will become seamless. Or at least HTML5 will alleviate some of the work we have to do to make things accessible. But things are not there yet.</p>
If you are ready to take this further, here are some useful links. Happy coding!
The wiki development crew have been busy working on a new release of the IBM Collaboration Solutions product wikis of the past couple of months, and the following improvements have now been deployed to all of our wikis:
To view these improvements, visit your favorite IBM Collaboration Solutions product wiki.
The IBM Collaboration Solutions wikis have been upgraded to the latest wiki template. Based on feedback from you, we have made the following improvements:
Download a detailed walk-through of the wiki improvements in PDF format:
Click here to download the wiki walk-through presentation in PDF format