Wednesday Jul 17, 2013

Wireframing | Blueprinting Usable Applications Concepts

By Karen Scipi and Ultan O’Broin, Oracle Applications User Experience

How do users' stories inspire user experience innovation and end up as well-loved, simple productivity features in your favorite mobile or desktop application? The process starts simply . . . with a drawing or sketch.

Building an application that is modern and compelling means framing the task scenario for the worker in context of the application features and then communicating the agreed result. Using a low-fidelity drawing to wireframe the proposed solution is a productive and efficient way explore, validate, and garner agreement on a design before it moves on to the prototyping stage of the build process.

Practice for building an Oracle applications user experience

Wireframing is integral to the user experience process of building great Oracle applications

Wireframing as part of the user experience process

A wireframe represents a story of how applications pages are used by real workers to do real work. Wireframing is a low-fidelity drawing on paper or electronic format that starts to close the gap between the intent of the concept and the action of the worker, which eventually comes to life as an application living in the cloud or in your computer room.

Wireframe example of a trouble ticket in CRM


Wireframe of a trouble ticket in CRM that shows how design patterns and guidelines are applied to  build consistency and productivity into a flow (click for full version in PDF)

Wireframing offers big wins for applications builders. We’ve learned that wireframing shortens the innovation cycle, exposes problems early, increases productivity of application builders, and eliminates costly surprises late in the build cycle. Customers and partners have learned this, too, when designing and tailoring applications. We use wireframes to apply usability heuristics, and we apply our user experience design patterns to the wireframe before a single line of code is written. Using wireframes, we can iterate quickly and evaluate alternatives in a cost- and time-efficient way. Partners and customers have learned this, too, and more, when designing and tailoring applications.

Which best practices do we apply when wireframing? 

Wireframing practices vary. We follow a few best practices consistently, including: 
  • Focus on the intent of a wireframe. 
Understand the difference between a wireframe, prototype, and testable application code. Garner buy-in from the right stakeholders, not just end users, but also other interested parties, such as other workers or developers or support people, managers, and decision-makers so that you can void the "but all I wanted was" syndrome after the development is complete. And do remember this is a process. Some things cannot be wireframed
  • Manage your wireframing practice. 
Plan and control wireframing by assigning an owner, applying file naming and priority conventions, managing version control, adding arrows and annotations, and so on. 

Think about this: The great sketching master Leonardo da Vinci organized his sketches in a codex or library—principles that are well founded to this day.
  • Use suitable tools. 
Paper and pencil can be used as basic wireframing tools, but they are not scalable and persistent. Software tools, such as Balsamiq Mockups (widely used in Oracle), Microsoft Visio (a favorite of Oracle Fusion Applications internally, also used by the Oracle Application Development Framework team), Microsoft PowerPoint, and mobile options, for smart phones or tablets are better alternatives for building enterprise applications. Considerations for wireframing tools that we've found most useful include ease of use, speed of iteration, portability, ease of collaboration, cost of the software, and ability to avoid lock-in between partners.
  • Establish a few process best practices. 
Wireframing is about iterating until agreement is reached. Provide alternative drawings for evaluation by stakeholders. Create widgets, templates, and stencils for wireframing in your tool of choice and then reuse them. Matching wireframe flows to the reusable solutions provided by user experience design patterns also cuts design and development time and improves developer productivity.
  • Learn from others. 
Stay tuned to Misha Vaughn's Voice of User Experience (VoX) blog and your customer and partner channels so that you can learn about workshops that focus on building great-looking usable applications, A Day in the Life of UX wireframing activities, and other upcoming outreach opportunities that explore wireframing as part of the overall user experience process.

Interested in learning more? 

See:

About

Welcome to the Usable Apps blog.

Learn more about us at
Usable Apps

Search

Categories
Archives
« July 2013 »
SunMonTueWedThuFriSat
 
2
3
4
5
6
7
8
9
11
12
13
14
15
16
18
19
20
21
22
23
25
26
27
28
29
30
   
       
Today