UX/UI Design the benefits of building prototype, even if you have only initial sketches of your prototype.

image

This week I had a really interesting discussion/debate with a University lecturer on teaching user interface design and it took me back just to how things have changed since the mid-nineties.

When I was a student a lot of CS courses which looked at interface design had materials which referenced the following statement “The Evil’s of Rapid Prototyping,”  and many slide decks contained reasons why rapid prototyping was a bad idea. Most of the reasoning centred around prototyping tools being so complex back then, they needed to be operated by developers; subsequently, the design process tended to be influenced by all design work needing to be interpreted through the lens of what a prototyper could actually achieve with the software available.

Fast forward to today and there’s been a rethinking on prototyping. Is this good or bad?      

I recently blogged about how professional organisations are using tools such as OneNote for UI/UX design. Additionally there a lots of new prototyping tools have appeared over the past few years and they’re rapidly being adopted by interaction designers.

So we concluded that the creators of these tools never attended one of these courses!

So the question I now want to pose is.. how do go about teaching modern user interface design and application workflows on your courses and what tools and resources do you use?

As we know prototypes can be as simple or as complex as necessary for the project on which you are working.

For example

  • A prototype can be a rough sketch with notes
  • A linear sequence of slides with a few notes that demonstrates
  • A workflow drawn on the art board,
  • A complex graph, outlined in the panel designs and layouts, that includes reusable elements on a single screen (component screens), and navigation between screens (navigation connections).

What tools do you use?

Microsoft SketchFlow includes several tools to make your prototype interactive in order to more closely mimic the flow of a production application. For example, with SketchFlow, you can do the following:

  • Begin a prototype with just a site map and a few notes jotted on the application screens, and then continue to refine your prototype as you go along.

  • Either draw user interface (UI) elements, or import them from common drawing programs.

  • Animate your prototype, creating a visual representation of the interaction between the user and the application.

  • Use the full library of standard UI elements and custom controls.

  • Create sample data on the fly, easily build data-driven UI, and add styles to your data.

  • Create interactivity without writing code by using built-in behaviours. Behaviours are extensible, making it easy to add custom behaviours to your prototyping toolbox.

  • Either write code to create custom elements, or use pre-built elements from your development team

Sketchflow Resource

For more details on Sketchflow see https://msdn.microsoft.com/en-us/expression/ee215229.aspx 

Tutorials on Sketchflow see www.microsoft.com/.../creating-navigation.aspx

But what about considering Modern design principles..

With Windows 8 and Windows Phone 8 we have the following key principles which need to be adhered

image

 

So the key things you need to consider when designing your apps for modern applications are..

Ensure that you weave platform features into your core scenarios and prototype design to leverage the power of the underlying platfom..

So lets think about the platform features available..

image

 

To help develop these scenarios here are list of the key resources.

Microsoft Design Guidelines for Windows Phone https://design.windowsphone.com

Microsoft Design Guidelines for Windows 8 https://design.windows.com

Microsoft User Experience Fundamentals and online training https://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012

So where to start?

To help you get started on your app development here are some templates and guidance from https://channel9.msdn.com/Events/Windows-Camp/Windows-8-UX-Fundamentals-Training-Workshop-2012

image

 

Example of a completed template for a new app design/concept.

image

image

image

image

Conclusion

In summary, using any form of prototype technique makes it easy to sketch out a conceptual application and ensure the following are achieved.

image

So what are you waiting for? You can just create a series of screens and use the templates above and then begin to draw. As your idea progresses, you can add interactive elements that make your prototype as close to the finished product as you need it to be to communicate the design idea you want to convey.

Reviewers can use the tools such as SketchFlow, One Note  to view the application flow, and then leave feedback directly in the project as annotations. Once the feedback has been incorporated and the prototype is complete, the prototype project can be handed off to a developer for conversion into a final application,