Interaktionsdesign mit Wireframes

52

description

references at http://mprove.de/script/12/fbi/wireframes.html

Transcript of Interaktionsdesign mit Wireframes

Page 1: Interaktionsdesign mit Wireframes
Page 2: Interaktionsdesign mit Wireframes

<Insert Picture Here>

Wireframes im Interaktionsdesign – 23.5.2012

Matthias Müller-Prove • User Experience Principal, Oracle

Page 3: Interaktionsdesign mit Wireframes
Page 4: Interaktionsdesign mit Wireframes

http://flickr.com/photos/activeside/2184823461/

Site-Maps

Page 5: Interaktionsdesign mit Wireframes

http://flickr.com/photos/jimbola/2284119465/

Page 6: Interaktionsdesign mit Wireframes

Ski-Was?

http://flickr.com/photos/38451115@N04/5229195968

Ski-Wäs?

Page 7: Interaktionsdesign mit Wireframes

Donna Maurer http://slideshare.net/donnam/information-architecture-introduction

Page 8: Interaktionsdesign mit Wireframes

Primary Navigation

Content Area

Ads

2nd OrderNavigation

Page 9: Interaktionsdesign mit Wireframes

Schematics

Schemazeichnung

Explosionszeichnung

Blaupause

Wireframes

Drahtmodell

Plan

Click-Dummy

Page 10: Interaktionsdesign mit Wireframes

Wireframes sind digitale Schwarzweiß-Zeichnungen.

Wireframes sind schneller und billiger herzustellenals Websites.

Wireframes sind abstrakt und detailliert.

Kommunikation zwischen Designer und KundeKommunikation zwischen Designer und Entwickler

S/W, damit der Kundenicht die Farbgestaltung

kommentiert

Page 11: Interaktionsdesign mit Wireframes

<Insert Picture Here>

Der Computer als Medium

ein kurzerphilosphischer

Exkurs

Page 12: Interaktionsdesign mit Wireframes

http://flickr.com/photos/mprove/2855242322/

Bill Verplank, BayCHI 2008

Der heilige Grahldes Interaktionsdesign

Page 13: Interaktionsdesign mit Wireframes

Bill Verplank, Interaction 11 (video): http://vimeo.com/20285615

Page 14: Interaktionsdesign mit Wireframes

Ein persönliches dynamisches Mediumflickr.com/photos/ezu/5604927/

Page 15: Interaktionsdesign mit Wireframes

Ein »soziales« dynamisches Medium

Page 16: Interaktionsdesign mit Wireframes

<Insert Picture Here>

Desktop Virtualizationmit Oracle VDI

Page 17: Interaktionsdesign mit Wireframes

http://dryicons.com

Ein verteiltesEngineering-Team

für DesktopVirtualization

Page 18: Interaktionsdesign mit Wireframes

18

http://www.time.com/time/photogallery/0,29307,1930296_1967873,00.html

And now to somethingcompletely different…

Page 19: Interaktionsdesign mit Wireframes

19

Page 20: Interaktionsdesign mit Wireframes

20

Page 21: Interaktionsdesign mit Wireframes

desktop access layer

storage layer

session management layer

virtualization layer

Page 22: Interaktionsdesign mit Wireframes

access

storage

sessions

virtualization

Oracle Virtual Desktop Infrastructure 3.4LDAP/AD MySQL

MS Hyper-VVirtualBox VMware vCenter/ESX

MS RemoteDesktop

GenericRDP

Sun RayKiosk

Thin ClientSun Ray

LaptopOVDC

iPadOVDC App

WebOSGD

RDP Client

Sun ZFS iSCSILocal NFS

Page 23: Interaktionsdesign mit Wireframes

Sun Ray Thin-Client PortfolioSun Ray 3

Sun Ray 3 Low cost, low power, small footprint

Sun Ray 3iAll-in-one client with 21.5" screen

Page 24: Interaktionsdesign mit Wireframes

Copyright © 2011, Oracle and/or its affiliates. All rights reserved.

Oracle Virtual Desktop Client App on iPad

Page 25: Interaktionsdesign mit Wireframes
Page 26: Interaktionsdesign mit Wireframes

Copyright © 2011, Oracle and/or its affiliates. All rights reserved.

Desktop Session on Sun Ray Thin-Client

Page 27: Interaktionsdesign mit Wireframes

Flexible Desktop Assignments

http://www.designcomics.org/

Page 28: Interaktionsdesign mit Wireframes

Flexible Desktop Assignments

Template

flexible assignedlogged in

AvailableDesktop

flexible assignedlogged out

AvailableDesktop

Pool with flexible desktop assignment

AvailableDesktop

Desktop

Page 29: Interaktionsdesign mit Wireframes

Personal Desktop Assignments

Page 30: Interaktionsdesign mit Wireframes

Personal Desktop Assignments

Template

Nina’sDesktop

Michaelpersonal assigned

logged in

Ninapersonal assigned

logged out

Pool with personal desktop assignment

Michael’sDesktop

Page 31: Interaktionsdesign mit Wireframes

<Insert Picture Here>

VDI Administration

Page 32: Interaktionsdesign mit Wireframes
Page 33: Interaktionsdesign mit Wireframes
Page 34: Interaktionsdesign mit Wireframes

Wireframing mit OpenOffice.org Impress

via http://www.scaffoldage.com/post/3897615849

Page 35: Interaktionsdesign mit Wireframes
Page 36: Interaktionsdesign mit Wireframes

VDI 3.0 VDI 3.18 Monate 7 Monatev47 v22

174 Slides 271 Slides

VDI 3.2 VDI 3.36 Monate 7 Monatev18 v8

297 Slides 317 Slides

Page 37: Interaktionsdesign mit Wireframes

»Bei 25 Folien pro Sekunde bewegt sich das Bild.«

Lorenz Engell in Powerpoint, Fischer 2009

Page 38: Interaktionsdesign mit Wireframes
Page 39: Interaktionsdesign mit Wireframes
Page 40: Interaktionsdesign mit Wireframes
Page 41: Interaktionsdesign mit Wireframes
Page 42: Interaktionsdesign mit Wireframes

http://blogs.sun.com/mprove/entry/vdi_3_ux_story_wireframes

» intelligent misuse «OOo Impress als

Werkzeug für Wireframes

Page 43: Interaktionsdesign mit Wireframes

Wireframes sind Layout ohne Visual Design.

Wireframes können Interaktions-Flows darstellen→ Storyboards

Wireframes sind Sketches, Mockups, Prototypen oder Spezifikationen.

Kommunikation zwischen Designer und EntwicklungKommunikation zwischen Designer und QualitätKommunikation zwischen Designer und Dokumentation

Wireframes sind Planungs- und Designmedium.

Page 44: Interaktionsdesign mit Wireframes

Paper 53

Page 45: Interaktionsdesign mit Wireframes

iMockups

Page 46: Interaktionsdesign mit Wireframes

Balsamiq

Page 47: Interaktionsdesign mit Wireframes

Axure

Page 48: Interaktionsdesign mit Wireframes

via http://www.scaffoldage.com/post/3853646769

Vielen Dank!

Page 49: Interaktionsdesign mit Wireframes

50

Weblinks

mprove.de– mprove.de/script/12/fbi/wireframes.html – @mprove

Virtualisierung bei Oracle– oracle.com/virtualization– blogs.oracle.com/mprove/

User Experience in Hamburg– uxhh.de– ixda-hamburg.de– UXForum auf Xing

Page 50: Interaktionsdesign mit Wireframes
Page 51: Interaktionsdesign mit Wireframes

52

Page 52: Interaktionsdesign mit Wireframes

53