Humane interface

Axure in action v2 – Update to RP Pro 6

June 15, 2011 – 9:26 am

Axure in Action is a prototype created to showcase all the functionality available in Axure RP Pro (more details at http://www.humaneinterface.net/axure-in-action-1/).
A new version created in Axure RP 6 is now available:

Axure in Action v2: original Axure RP Pro 6 file (2,1 MB)

There’s not big changes but I updated the Albums page using selection groups and made the map on the Contacts us page draggable. I would have liked to show much more of the new functionality available in Axure RP 6, but I am planning to do it in the upcoming posts.

I also set up a newsletter, for those who wish to be kept up to date on new posts and don’t tend to use RSS.

By Luca Benazzi | Posted in Prototyping | Tagged Axure, Prototype, Wireframes | Comments (0)

iPhone/iPad prototyping in Axure RP Pro 6 – Quick overview

April 21, 2011 – 1:16 pm

I am testing several tools that can be used for mobile prototyping, some of them are generic and some of them are specific to iOS. With regards to Axure RP Pro in its newest 6th release, there’s some interesting new features which can become handy when it comes to simulating UI patterns that are typical of the iPhone/iPad environment.

As a side note, this post refers to HTML prototypes that can be viewed on an iPhone/iPad’s browser, or via emulators such as testiphone.com or ipadpeek.com. If you wish to simulate an iPhone App and test it directly on the device, you might consider an iPhone/iPad specific tool, such as Appcooker.

“Include viewport tag” in the HTML prototype

The “Generate prototype” dialog in Axure RP Pro 6 contains a “Mobile/device” section where it’s possible to select the option to include the viewport tag in the HTML code. When generating a prototype for mobile screens, the viewport tag is what you need to scale the content to the real estate available on the device’s screen.

In the specific case of an iPhone, constraining the design into a 320/640 pixels wide layout (the width of the iPhone screen) on the Axure workspace is not enough. The content also needs to scale correctly and that’s where the new feature becomes essential.

All the information you need to set the viewport tag correctly for an iPhone/iPad prototype is available on the Apple’s Safari Development Library.

Drag and drop

In Axure 6, dynamic panels support a rich set of events including OnDragStart, OnDrag and OnDragDrop. Also, new conditions can be applied, so for example it’s possible to track the position of the cursor and/or of the panel being dragged and create conditions that are verified once any of these overlaps another widget. This allows to simulate typical iPhone/iPad UI patterns, such as dragging and flicking, with control over the minimum amount of pixel necessary in order to activate sliding effects, such as on the iPhone home screen. The latest Axure release at the time of writing fixed a bug so that drag and drop functionality created in Axure can be tested directly on an iPhone/iPad, but you can also either use a simulator (as those mentioned above), or a remote screen viewing application, such as Live View (check this link to see how it works: http://labs.ideo.com/2010/05/10/liveview-an-iphone-app-for-on-screen-prototyping/). If you enable the “Interpret touch as mouse event” option on your Mac, this very nice application allows you to interact on your iPhone with the files that are actually on your computer. Drag and drop works, even though it’s rather slow and I did not find the time yet to see if there’s a way to connect iPhone and Mac so it becomes more responsive.

Another possibility is to view the prototype in a normal browser, show the device as a static image and use a frame to display the designs so they fit into the screen estate.

More explanations on the new drag and drop functionality can be found on the Axure official blog: http://axure.com/cs/blogs/axure/archive/2010/12/16/Axure-RP-6-Drag-and-Drop-Interactions.aspx

New effects on panel move

Special effects such as acceleration or bouncing effect can now be applied to dynamic panels when they move, thus allowing a more accurate simulation of typical iOS effects. For example, the horizontal sliding effect from a page to the next one as on many iPhone apps/web applications can be created using a dynamic panel and activating an horizontal movement with some effect such as acceleration or bouncing after the panel has been dragged by a certain amount of pixels.

More step-by-step instructions to come…

Please stay tuned as I am planning to release a video demonstration and a much more detailed tutorial on this topic. Sorry I can’t be more detailed for the time being, I hope this helps!

By Luca Benazzi | Posted in Mobile, Prototyping | Tagged Axure, Prototype, Wireframes | Comments (13)

Are personas really useful? (draft)

December 29, 2010 – 7:03 pm

My opinion on this is no, personas are largely overvalued, and might not bring the benefits that are expected. I’ve seen companies spending a huge amount of money to create personas that nobody ever looked at. When Alan Cooper introduced personas in his book The lunatics are running the asylum, he described a completely new way to design products where users’ need are the main focus, and that change was such an important step forward. But look at the way personas are used by organisation: are they really used as a way to create great designs? I doubt it.

I believe that while personas are rough tools that can be useful to some extent, activity-centered requirements, or scenarios, whatever we want to call them, are far more important, because they allow to foresee what people will look for and how they will try to accomplish their goals, in a specific context of use and starting from a specific situation. I don’t see how a good design solution can come out of accurate personas without a list of scenarios related to them.

Personas tend to be exhaustive where it’s not needed (demographics, names, pictures are not necessary most of the times), while they fail to summarise the complex variety of needs and usage scenarios that real users express in real life situations.

Despite that, personas have become very popular. I believe this is due to the fact that non designers who influence the business decisions and therefore the design, and among these, strategists and marketing people, see personas as tools familiar to what they are used to deal with. Therefore they are in favour of personas as a product development tool.

Many of these people foster the creation of personas with high expectations in mind and the desire to engage people, making sometimes valuable efforts, but unfortunately they are not used to think the way a designer should think, putting themselves in the users’s shoes. And the need to sell and to convince people is still stronger than the need of giving people what they need. When personas are developed in this context, far from an authentic design perspective, they end up being almost useless. How do you double check whether the design solutions you are choosing will really offer people what they need when they need it?

It’s interesting to see what Donald Norman says about activity-centered design:

Donald Norman: Human-Centered Design Considered Harmful

By Luca Benazzi | Posted in Design, User research and requirements | Tagged Personas | Comments (0)

The basis of good design solutions (draft)

December 29, 2010 – 6:29 pm

These are in my opinion the most important requisites for great design solutions:

1. Create a list of activity-centered requirements and test any design solution against each of them

2. Prototype the solutions you wish to implement before you create them

3. Test with real users throughout the design and development lifecycle, following an iterative process

These three ingredients are foundamental and without any of them, getting to a good solution can be very difficult if not impossible.

Now some considerations:

Activity-centered requirements: what I mean here is something very close to scenarios, but actually the extended and wordy description used in the case of scenarios is not always required and achievable, so I am using a different wording. Activity-centered requirements are rarely used as a designed tool the way they should be. While personas are very popular, and practically not very useful for a number of reasons, scenarios as activity-centered criterias for the evaluation of the design solution are undoubtedly underestimated. Most organizations have priorities, often related to marketing campaigns and business requirements, that keep away from the real needs of the end users and the way tasks are expected to be achieved in a specific context of use. The result is a design solution that fails to target key features that people would find useful to have or does not allow to achieve tasks the way it should happen in a real situation.
Testing has become a common practice, but having seen many usability testing sessions being performed by different companies, I noticed how far these session can be from a real user experience scenario, and therefore, how misleading usability testing can be most of the times.

By Luca Benazzi | Posted in Design, User research and requirements | Comments (1)

Axure training courses

December 16, 2010 – 8:25 pm

I recently started to provide professional training courses on prototyping software Axure RP Pro. This course covers everything from the basics to master level. I am also available as a consultant to work with companies help solve specific problems with Axure, like creating complex interactions and patterns, manage templates for their organization, and so forth.

I have been creating interactive prototypes with Axure on dozens of different projects since the first release came out, each time in a different business context and with specific requirements that had to be met. I’ve also been been in touch with the development team at Axure in order to deepen my knowledge of the tool and contribute to the improvement of the tool.

I am currently based in Berlin. I am willing to travel to some extent, but it’s also possible to arrange remote training sessions using a software like GoToMeeting.

The course covers the new features of release 6.

The courses can be targeted to the needs of any business. The standard course covers everything from the very basics to mastering Axure at the top level, but topics can also be covered in a specific order.

More information about the standard course outline, prices and testimonials at www.axure-training.com/

By Luca Benazzi | Posted in Prototyping | Tagged Axure | Comments (1)

Simulating an eCommerce checkout process in Axure

October 11, 2010 – 11:19 pm

I created a prototype which includes the backbone of an e-commerce login / register process. The notes also include some subtleties on how conditions can be used sequentially in Axure RP Pro.
I did not focus on the layout and the interaction, but I recommend that you take a look at the way the transition from one page to the other takes place, and the differences between the logged in journey and the not logged in journey.
Notes are included at the bottom, on a green background.

E-commerce simulation: HTML version
E-commerce simulation: original Axure RP Pro 5.6 file (660 KB)

Mega drop downs Axure by Luca Benazzi is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

By Luca Benazzi | Posted in Prototyping | Tagged Axure, Prototype, Wireframes | Comments (2)

Creating mega drop-downs in Axure RP Pro

July 28, 2010 – 5:07 pm

I spent quite a large amount of time figuring out what’s the best way to prototype on mouseover effects such as mega drop downs in Axure RP Pro. The basics of how that can eb achieved are illustrated on the Axure official site, on this page (scroll down to the bottom, till to “Mega menu”:

Hide and show a mega menu using Axure (official site)

What you can find here is an alternative way to achieve the same results. Even though this solution is not as simple as the one displayed on the link above, I recently reconsidered as a good alternative, because it allows to improve the interaction on complex patterns such as a combination of a mega menu and a flyout menu underneath. In this case, in fact, the main issue is how to create a delay on mouse out. This can’t be achieved in Axure as on a proper front-end, as the menus should disappear only if the mouse cursor leaves the active area for more than, let’s say, 500 ms, and the limited scripting options of Axure don’t allow for this. But you can get to a similar result by positioning the escape areas (image maps) that you’ll find in the example below so that the effect is similar to the intended. I am sorry I can’t be more detailed for the time being, but if I’ll ever manage to put all these findings together, I will publish them on this blog. At the time of this writing, I am still in the process of exploring this solution.

Mega drop-downs in Axure: HTML version
Mega drop-downs in Axure: original Axure RP Pro 5.6 file (330 KB)

Mega drop downs Axure by Luca Benazzi is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

By Luca Benazzi | Posted in Prototyping | Tagged Axure, Prototype, Wireframes | Comments (5)

Axure in action: an interactive prototype

September 7, 2009 – 2:02 am

AxureInAction

It’s now available on humaneinterface.net a highly interactive prototype created with Axure RP Pro, the powerful software for generating clickable wireframes and dynamic patterns similar to those of rich internet applications.

The HTML prototype contains examples of advanced protoyping techniques and some brief notes in a green backgroud to explain the structure of each page and the algorithms. I am planning to create more thorough exaplanations in the future.

The code is quite heavy, Safari or Firefox are recommended

Axure in action: HTML version
Axure in action: original Axure RP Pro 5.6 file (3 MB)

Any feedback will be strongly appreciated.

Axure in action by Luca Benazzi is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.0 UK: England & Wales License.

By Luca Benazzi | Posted in Prototyping | Tagged Axure, Prototype, Wireframes | Comments (13)