Tuesday Oct 19, 2010

Oracle VDI UX Story - Wireframes

Oracle VDI 3.2 Wireframes Sun VDI 3.0 Wireframes Wireframing is a quite common method in user experience design. It is a way to explore and specify a user interface without wasting expensive engineering time. It is easy and fast to visualize an idea of the planned interaction flow, and discuss with colleagues. To that extend it is somewhere between sketches and formal interaction design specifications.

There are at least 18 Wireframing, Mockup And Prototyping Tools To Plan Designs available. (Und eine Diskussion im UXForum). However, when I joined the VDI team I decide to start my wireframes journey with OpenOffice.org Impress, OOo's presentation module.

A disclaimer on the second slide says, "This is not a presentation. It is a collection of low-fidelity screen designs, aka. »wireframes« for project xy. Therefore it is part of the specification at URL.". This should prevent anybody from presenting the slides with a projector one after another. The consequences on the audience would be horrible! And maybe this is the reason why I just show the thumbnails as an example.

Instead it is recommended to make extensive use of the Slide Sorter mode, and I am following a few simple rules to support orientation and navigation in the document. The slides are organized in a linearized way throughout the entire application.  BTW_ I am talking about Oracle VDI Manager, a web administration tool to configure user groups, pools of desktops of virtual machines, and hypervior and storage resources. And -- no surprise -- this is exactly the order of sections in the wireframes. Large images mark the beginnings of the sections because they remain visible even when zoomed out in slide sorter mode. See for instance the s-shaped image in the third row of the left image to the right. Another one is for example in the 7th row from the bottom. Between VDI 3.0 and VDI 3.2 (the image far right) the number of pages that correspond to the number of different screens in the application grew significantly. But I am still pursuing this approach, now with an image filling the entire slide. Look for the blue - water - pool image in row 13 / slide 51.

You can already see this in the skyscraper images to the right, but I assume that you clicked and zoomed-in meanwhile. Then you can discover some other visual hints that guide me and my colleagues through the document. Wizards. Drill-Down views, confirmation dialogs for delete operations, settings pages. And lots of colored text boxes that convey specific meaning, and of course more details than the wireframes themselves.

[Hurray, this is hypermedia. I made you open and inspect three tabs in your browser!]

Let me conclude with a couple of remarks. This is approach is only possible because of the robustness of OpenOffice.org and NeoOffice. However, performance and layout of the Slide Sorter should be improved. Second, this approach is only possible because of additional User Interface guidelines because by definition wireframes provide just the layout, maybe the interaction, definitely not the visual design. And last but not least, it's possible because of the engineering team. There are plenty of iterations and dozens of shared screen conferences between Hamburg, Dublin, and Guichen. Over the time the team got used to wireframes as one central element for developing Oracle VDI.    

And finally, I am happy, that I delivered the forth part of my VDI UX Story to you.

Monday Apr 06, 2009

Sun VDI 3 UX Story - Concept Workshops

About a year ago I joined the Desktop Virtualization team at Sun as an User Experience Architect. I knew Sun already from my previous job on OpenOffice.org/StarOffice, and also a few of my new team mates which gave me a kick-start. But the area of desktop virtualization was completely new to me. So you can read this as an experiment how to dive into a new domain with just some user experience methods and team collaboration tools in your back pocket.

One of the tools is the concept workshop. It is a meeting that takes at least half a day and that can also be conducted over several days. It involves all engineers of a specific area, and as far as the user interface or general concepts are concerned also my participation. The dynamics is hard to explain, but we start with a topic and distributed expectations and knowledge and end with a common understanding of what we want to accomplish and how to get there. A moderated pace and lots of space on multiple whiteboards are important aspects for successful workshops. As shared knowledge is very transient in nature, we capture the results by taking photos of the whiteboards and transforming the important aspects into diagrams, concept maps, or white papers. They are stored on the team wiki or in internal blogs, so that everybody can refer to the results and add the latest twists.

Here is one of my favorites examples to give you an idea. It covers the cluster install process of Sun VDI 3 on at least 3 servers. And because it did not fit on one whiteboard the image below is a stitched version.

The outcome of the initial workshop in May 2008 was an object model for Sun VDI (users, user groups, token cards, pools, desktops, desktop providers, ...), actions on those objects (create, add, assign, login, ...) and task flows or scenarios (sequences of actions to accomplish certain goals). Together with some estimations on the expected number of objects in the system this was the raw material to start designing the user interface.

Another benefit of concept workshops should also be mentioned. Especially during the early stage of a project, workshops help to define a project language for the team. Furthermore, different mental wave lengths are adjusted and the people are enabled to work together -- even remotely. This matters in an international team such as the VDI team with engineers from Ireland, Spain, Mexico, France, and Germany at two main sites. The extended team also includes people from India, the US, and Canada.

>> VDI UX Story: Part 2: User Research | Part 3: Power of the Web



« June 2016