3

I'm trying to design a simple first-run tutorial for a Windows Phone app. It will be linear and informative only (no user input required beyond navigation). I feel the following actions are necessary in one form or another:

  • move to previous screen
  • move to next screen
  • exit now

What is the most intuitive layout of these buttons that is consistent with the Windows Phone UI/UX?

enter image description here

Layout schemes I have tried:

  • "next" button on the left; "skip" button on the right; no "previous." This conforms to the Microsoft standard of thing we think you want to do is on the left, cancel action is on the right. However, I expect "back" and "forward" buttons to be aligned left and right, respectively. Also, the lack of a "previous" button feels a bit trapping.
  • "done" button on the left; swipe left and right between screens. Feels good though highly discouraged (the practical way to implement it, at least)
  • "done" button on the left; "next" button on the right; no "previous." Again, this forward-only progression feels trapping. ("Honestly, I already forgot what I read two pages ago.")
  • "previous" button on the left; "next" button on the right; "skip" link-button somewhere up top. This feels like the closest to a glanceable, predictable layout. But I feel like skip link-button is both non-standard in WP-land, and -- more importantly -- will get lost amongst the visual clutter of fuller pages.

Finally, this is a personal project with no hard requirements. I'm just seeking an intuitive, native look and feel.

Improve this question

2 Answers 2

Reset to default
2

As a WP8 user, I feel this is not consistent with tutorials that I have seen before (namely Nokia apps).

Why don't you show this welcome screen with an arrow to the right in the center and the user would swipe through the screens (especially that it's linear).

enter image description here

The user would swipe through the different screens and when (s)he reaches the final one it'll have the done button. On the second screen and after, there'd also be the opposite button to swipe to the previous page.

I'm also inclined to say that most of the tutorials that I saw like this by Nokia were done in landscape mode, but I'm not sure of this last point.

Improve this answer
1
  • While this is the most difficult to implement (without abusing a Pivot view), I feel it's the cleanest and most consistent with WP.
    – zourtney
    Feb 21, 2014 at 15:15
1

What you have now looks pretty native to me, though the 'skip' is far too hard to notice (and tap!) at the moment. You're also right that a link-button is very non-standard in WP-land; in first-party apps you only see it in obscure places like 'read more' links in Settings when there is a lot of text that needs to be hidden. What's stopping you from using a regular button?

enter image description here

Improve this answer
6
  • I like how you right-aligned the skip button. That "feels like" desktop Windows' close button paradigm. I did something similar by right-aligning the link-button and coloring it with PhoneAccentBrush. I need to test it on a real device to see how it feels in hand. It may indeed be too small, but on screen at least, it satisfies the "obvious but not loud" idea I was going for.
    – zourtney
    Feb 17, 2014 at 23:20
  • (...continued) My hesitation with making skip a standard button is what I'll call "three's a crowd" mentality. Maybe it's a personal flaw, but when I glance and see two buttons, I figure "Ok, yes/no or whatnot." When I see three buttons, the distinction is muddied. Now I have to read. Ironically(?), I find that having the skip button so far away actually exacerbates the problem, splitting my focus both high and low. (And now I've fulfilled today's quota of overthinking) :-P
    – zourtney
    Feb 17, 2014 at 23:21
  • @zourtney I see where you're coming from. I think the link/button choice would also depend heavily on the content that you're intending to display - busy photographs? definitely not a link. Another alternative I considered (I don't know enough about your app, though) was a splash screen of sorts - allowing you to skip or begin the tutorial; only if you begin do you actually get to the screens with prev/next buttons.
    – Jessica Yang
    Feb 19, 2014 at 18:28
  • I dislike the explicit "previous" button. For that we do have the back button which, when pressed, should do the same thing. And you should not repeat yourself.
    – Toni Petrina
    Feb 20, 2014 at 7:56
  • @ToniPetrina, I mostly agree. However, there's ambiguity as to what happens when you press the back button. It might: a) go to the previous tutorial page, b) cancel the tutorial c) or exit the app. Currently it's implemented as a single page, so it'll current do b) or c) depending on where you navigate from.
    – zourtney
    Feb 21, 2014 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.