blueprints for mobile design: wireframing 101

13

Upload: amis-friends-of-oracle-and-java

Post on 11-Nov-2014

374 views

Category:

Technology


1 download

DESCRIPTION

Ultan Ó Broin Looking to build your first mobile app? Wait! Before you do, learn one skill you need to know before you open the laptop – how to wireframe. Hear Ultan O’Broin discuss how and why Oracle user experience professionals wireframe before they build, and why we teach wireframing in all of our developer outreach activities. Save time, money, and frustration.

TRANSCRIPT

Page 1: Blueprints for Mobile Design: Wireframing 101

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

Page 2: Blueprints for Mobile Design: Wireframing 101

Blueprints for Mobile Design Wireframing 101 Ultan Ó Broin (@usableapps) Director Oracle Applications User Experience

March 18, 2014 Nieuwegein, NL

Page 3: Blueprints for Mobile Design: Wireframing 101

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

Safe Harbor

The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.

Page 4: Blueprints for Mobile Design: Wireframing 101

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

Bringing Design to Life through Sketching Leonardo da Vinci (1452–1519)

Page 5: Blueprints for Mobile Design: Wireframing 101

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

What is Wireframing?

•  Planning and design communication: designers + developers, quality, documentation

•  Input: User requirements and product use cases •  Output: Lightweight (“low-fidelity”) drawing without visual design

•  Objectives

•  Explore page designs and user task flows

•  Blueprint interaction design

•  Evaluate page layout and components

•  Approvals and buy-in by stakeholders

UX Communication 3

Page 6: Blueprints for Mobile Design: Wireframing 101

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

Mobile Wireframing Benefits

§ Rapid way to explore design alternatives and key issues

§ Can easily make changes

§ Not tied to look-and-feel; lets you focus on core interactions and navigation without distractions

§ Prevents locking into a design because there is minimal effort to undo compared with prototype or coded app

Page 7: Blueprints for Mobile Design: Wireframing 101

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

Paper Wireframing Examples

Page 8: Blueprints for Mobile Design: Wireframing 101

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

On-the-Go Mobile Wireframing Simple, Form Factor

Page 9: Blueprints for Mobile Design: Wireframing 101

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

On-the-Go Mobile Wireframing Simple, Form Factor

Page 10: Blueprints for Mobile Design: Wireframing 101

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

Oracle’s User Experience Strategy is About …

Simplicity Easily access the essential information and actions to support your work.

Mobility Optimized UIs for wherever and however you work.

Extensibility Tailor the user experience to best fit your company’s identity and business processes.

Page 11: Blueprints for Mobile Design: Wireframing 101

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

Learn More About Oracle Apps UX Online

•  Oracle.com/UsableApps

•  Blogs.oracle.com/VoX

•  Blogs.oracle.com/UsableApps

•  @usableapps

Page 12: Blueprints for Mobile Design: Wireframing 101

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

Page 13: Blueprints for Mobile Design: Wireframing 101

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