Dialogs in Asha UI

By SannaH

July 17, 2013   Comments

ux, user-experience, ui, touch-ui, design


I’ve recently run into some misunderstandings with developers regarding dialog interaction in Asha UI; I hope this post will help clarify things.

In my previous blog post I stated that backstepping is always done via the hardware back key and there mustn’t be software back or exit buttons on screens. This is completely true. However, when talking about dialogs, there is another aspect that needs to be considered.

When you ask a question in a dialog you need to provide the possible answer options on screen. For example, if your app uses sounds and when launching the app you want to check whether to have the sounds on or off you would show a dialog asking: ”Do you want to play sounds?” and the available answers would be “Yes” and “No”.

Now, both of these answers will lead the user forward to open the app, right? Either you start the app with the sounds (by answering Yes) or without the sounds (by answering No).

But what if the user has tapped your app icon by mistake (this would be a rare case, I know, because your app is awesome!) and simply wants to close it? My guess is that they would press the back key; that’s what you do with Asha UI phones when you want to take a step back! So you need to ensure you map Back/Exit to the hardware back key.

What would be even more confusing than the back key not working in the situation would be to only show ‘Yes’ on the dialog and use the back key for ‘No’. Because that wouldn’t be backstepping anymore but actually breaking the paradigm, because it would take the user forward to start the app.

yes and no example screen

How about a situation where your dialog is for deleting, with options to either delete or cancel? An example would be: ”Delete image ‘myPicture’?” with options “Delete” and “Cancel”.

In this case “Delete” would delete the image,  while choosing “Cancel” would reverse the deletion. Both options would take the user back to the view where they initiated the deletion.

What would be the role of hardware back key in this equation? It should duplicate “Cancel”, as the user of an Asha phone is used to pressing the back key when they want to cancel something or to step back. Thus it’s important to always map Back/Cancel Command there. At the same time it’s equally important to provide the Cancel option on-screen as it “completes” the dialog by showing your options.

So remember

  • For a dialog with Yes/No options (where both options lead the user forward) have both options visible on the screen and use the Back key for canceling.
  • For a dialog with Yes/Cancel options (where yes completes the action and cancel aborts the action) duplicate “cancel” to the hardware back key.

Read more about Dialogs from the Nokia Asha design guidelines.

Happy developing,

Sanna