interaction design with wireframes
DESCRIPTION
http://mprove.de/script/11/wireframes/TRANSCRIPT
![Page 1: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/1.jpg)
Interaction Design with Wireframes – 11-Apr-2011
Matthias Müller-Prove • User Experience Principal, Oracle
translated version
![Page 2: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/2.jpg)
job title cloudover the years
![Page 3: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/3.jpg)
1996 – 2001 GoLive CyberStudio
2002 – 2007 OpenOffice.org
2008 – 2011 Virtual Desktop Infrastructure
![Page 4: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/4.jpg)
http://flickr.com/photos/activeside/2184823461/
Site-Maps
![Page 6: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/6.jpg)
Ski-Was?
http://flickr.com/photos/38451115@N04/5229195968
Ski-What?
![Page 7: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/7.jpg)
Donna Maurer http://slideshare.net/donnam/information-architecture-introduction
![Page 8: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/8.jpg)
Primary Navigation
Content Area
Ads
2nd OrderNavigation
![Page 9: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/9.jpg)
schematics
exploded drawing
blue plan
wireframes
![Page 10: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/10.jpg)
Wireframes are digital black & white drawings.
Wireframes are faster and cheaper to create than developing web sites.
Wireframes are abstract and detailed
Communication between designer and customerCommunication between designer and developer
Color might distractthe customer from thelayout and interaction.
![Page 11: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/11.jpg)
<Insert Picture Here>
Desktop Virtualizationwith Oracle VDI
![Page 12: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/12.jpg)
12
http://www.time.com/time/photogallery/0,29307,1930296_1967873,00.html
And now to somethingcompletely different…
![Page 13: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/13.jpg)
13
![Page 14: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/14.jpg)
14
![Page 15: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/15.jpg)
Sun Ray Thin-Client PortfolioSun Ray 3
Sun RayTM 3 Low cost, low power, small footprint
Sun Ray™ 3iAll-in-one client with 21.5" screen
![Page 16: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/16.jpg)
![Page 17: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/17.jpg)
![Page 18: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/18.jpg)
![Page 19: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/19.jpg)
Flexible Desktop Assignments
http://www.designcomics.org/
![Page 20: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/20.jpg)
Flexible Desktop Assignments
TemplateTemplate
flexible assignedlogged in
AvailableDesktop
flexible assignedlogged out
AvailableDesktop
Pool with flexible desktop assignment
AvailableDesktop
Desktop
![Page 21: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/21.jpg)
Personal Desktop Assignments
![Page 22: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/22.jpg)
Personal Desktop Assignments
TemplateTemplate
Nina’sDesktop
Michaelpersonal assigned
logged in
Ninapersonal assigned
logged out
Pool with personal desktop assignment
Michael’sDesktop
![Page 23: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/23.jpg)
<Insert Picture Here>
VDI Administration
![Page 24: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/24.jpg)
![Page 25: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/25.jpg)
![Page 26: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/26.jpg)
<Insert Picture Here>
Computer as Medium
a briefphilosophical detour
![Page 27: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/27.jpg)
http://flickr.com/photos/mprove/2855242322/
Bill Verplank, BayCHI 2008
The Holy Grail ofinteraction design
![Page 29: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/29.jpg)
A personal dynamic mediumflickr.com/photos/ezu/5604927/
![Page 30: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/30.jpg)
A »social« dynamic medium
![Page 31: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/31.jpg)
http://dryicons.com
A distributed engineeringteam for desktop
virtualization
![Page 32: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/32.jpg)
Wireframing with OpenOffice.org Impress
via http://www.scaffoldage.com/post/3897615849
![Page 33: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/33.jpg)
![Page 34: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/34.jpg)
VDI 3.0 VDI 3.18 months 7 monthsv47 v22
174 slides 271 slides
VDI 3.2 VDI 3.36 months 7 monthsv18 v8
297 slides 317 slides
![Page 35: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/35.jpg)
»The image moves at 25 slides per second.«
Lorenz Engell in Powerpoint, Fischer 2009
![Page 36: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/36.jpg)
![Page 37: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/37.jpg)
![Page 38: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/38.jpg)
![Page 39: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/39.jpg)
![Page 40: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/40.jpg)
http://blogs.sun.com/mprove/entry/vdi_3_ux_story_wireframes
» intelligent misuse «OOo Impress as
HyperCard substitute
![Page 41: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/41.jpg)
Wireframes are layout without visual design.
Wireframes can represent interaction flows→ Storyboards
Wireframes are sketches, mockups, prototypes or specifications.
Communication between designer and developmentCommunication between designer and qualityCommunication between designer and documentation
Wireframes are planning and design medium.
![Page 42: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/42.jpg)
Balsamiq
![Page 43: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/43.jpg)
Axure
![Page 44: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/44.jpg)
via http://www.scaffoldage.com/post/3853646769
Thank You!
![Page 45: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/45.jpg)
45
Weblinks
www.mprove.de– mprove.de/script/11/wireframes/ – blogs.sun.com/mprove/
User Experience in Hamburg– uxhh.de– ixda-hamburg.de
Virtualisierung at Oracle– oracle.com/virtualization– sun.com/vdi
![Page 46: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/46.jpg)
46
![Page 47: Interaction Design with Wireframes](https://reader034.vdocument.in/reader034/viewer/2022052619/5550e8d1b4c905417d8b4d59/html5/thumbnails/47.jpg)
47