Social Business User Experience blog
Amy Travis 1100006T7G email@example.com Tags:  smartcloud design ux socialbiz ibmconnect 2 Comments 3,318 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!
Laura Rodriguez 270004E6G8 firstname.lastname@example.org Tags:  userexperience design tablet mobile 2,009 Visits
As we shift towards a world where 'everything desktop' is expected on the tablet, we're looking at different ways of approaching design for the mobile context. Anyone who has designed in this realm before knows that mobile comes with a completely different set of expectations, motivations, and affordances. Personally, I don't have a lot of experience designing for anything other than print or web, so when I got my first iPad project I was suddenly faced with a very high learning curve.
1. You don't realize how much you defer to tooltips until you find out they don't exist.Whenever someone would ask me how a user would know what icon 'x' meant, I always had tooltips as my go-to answer. However, not being able to hover on an iPad is a blessing! I find that tooltips are usually a symptom of deeper usability issues; The second a user has to think "Hmmm, maybe if I hover over this I will get a clue!" something has gone off the rails. So–unless this is a game where users are supposed to be confused–not relying on tooltips has been a great push for usability and I will definitely second guess their presence on the web for now on.
2. Cursors are my enemy (for now).Cursors are exact. They let you click on really tiny things next to other really tiny things and for the most part come in the same shape and size. In contrast, our fingers do not and it's these limited and unpredictable modes of input that have replaced the cursor. What I came to discover was that the further I got away from computers during the early stages of the project the easier it was for me to design. When we were tasked with wireframing the interface I felt most productive hand-drawing on printed iPad templates and overlaying paper cutouts of iOS elements. Being able to, not only work at 100% scale, but also emulate the orientation and finger input methods played a big factor into the decisions we made.
3. Designing for the tablet on the tablet? Yes, please!While we felt like we had a good understanding of the interface's framework from our paper prototyping, we still had difficulty judging how natural and intuitive our app would feel. Still not trusting the cursor, we moved over to an iPad app (called Blueprint) that allowed us to storyboard our ideas and turn it into a working prototype. Now we were able to tap buttons and swipe popovers on the iPad at scale! This was a really cool experience and further informed our design choices.
Patrick Commarford 06000165T3 email@example.com Tags:  ux mega nav design menu navigation 2,914 Visits
Some IBM products have begun providing mega menus for global navigation, quick access to secondary views, and even direct access to individual artifacts. Feedback has been positive and we have recently drafted design guidance, as part of our IBM One UI initiative, for standardizing mega menu interactions.
The IBM One UI mega menu guidance is based on a combination of our experiences from multiple IBM products, UX-articles outlining best practices, our internal UXR data, and a review of industry practices.
The following is a sample mega menu design. There are no current plans for this design to appear in any IBM product.
Industry practices and user research data
During the course of defining the IBM One UI guidance for mega menus, we reviewed a number of UX articles documenting proposed best design practices for mega menus (along with the rationale behind those practices). As an example, see that Jakob Nielsen gave mega menus a big thumbs up after observing them to be a very usable & useful form of navigation.
Within IBM, we have also tested our own mega menu prototypes, with our UXR Team reporting that usability test participants like mega menus and make solid use of the shortcuts that the menus provide.
Our mega menu practices are also partially guided by an industry review of 35 web apps and sites that provide mega menu navigation. This review has helped us understand the dominant behaviors in the industry as we recognize that user expectations are shaped largely by their everyday software experiences.
A sample of a product experience
IBM Lotus Connections 3.0 began implementing mega menus in part to fix a design problem such that the top-level navigation, when exposed as a series of individual navigation links, didn't fit properly at 1024 px. The mega menus allowed us to provide navigation to all the primary views by collapsing some of them into an Apps menu. This also allowed us to save users clicks (and page refreshes) by providing direct access to secondary views, and in some cases direct access to specific artifacts (e.g., recent communities). By all accounts, this has been a very positive change.
Ethan Perry, our Connections Design Lead reports that he has received positive feedback from several customers, during design discussions, on both the mega menus implemented in v3.0 and on prototypes of more advanced mega menus (which include additional controls such as search mechanisms with autocomplete as well as primary actions that would otherwise only be available by first navigating to another view).
We like mega menus. We especially like our mega menus. We hope you do, too.
In visual perception a color is almost never seen as it really is—as it physically is.
This fact makes color the most relative medium in art.
–Josef Albers, Interaction of Color
Our perception of color is constantly influenced by the relationship between a given color and it's surrounding color (or colors) and is an important principle to be mindful of when working with color. Below is a simple example of this principle similar to the studies found in the above quoted book (Interaction of Color - Albers, Josef). The two small squares in the illustration below are the same color but have been purposefully made to appear different by placing them on particular background colors.
This principle can also be seen within our products as well. As an example, the 'IBM blue' of our application icons can appear to be different in varying contexts i.e. the dark backgrounds of our mobile applications and the lighter backgrounds we use in our web UIs. The following two Connections icons are identical but have been placed on a light and dark background. It's not as stark as the above example, but you can see how the left icon appears to be more vibrant than the icon on the right, even though they are both identical.