Thursday May 24, 2012

Interaction Design with Wireframes

Slides from my lecture about Interaction Design with Wireframes, yesterday at U of Hamburg:

Thursday Apr 14, 2011

Interaction Design with Wireframes

It can be done. I did it. Presenting 317 slides to a live audience in less than 3 minutes w/o hurting anybody. I didn't think that this is possible. But everybody survived the experiment.

The slides below are the disarmed (and translated) version of my presentation on Interaction Design with Wireframes at the University of Hamburg. Enjoy_

References and the link to the Holy Grail of interaction design is available at mprove.de/script/11/wireframes/

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.

About

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today