2

My goal: find optimal UX/UI pattern.

Pattern's goal: give a user choice between two actions.

Simple example: http://dribbble.com/shots/599154-Choose-Your-Option

Here is UX/UI pattern I implemented (30 second video inside): http://www.screencast.com/t/5g7RqlsP9t3

Page details: in my case I had a page where users top up their accounts. There are two ways of doing it: payment (any method) and coupon activation.

Please, tell what you think about the design pattern I used on the page. Is it too complex? Is it not obvious? etc.

Improve this question
8
  • Are there any specific problems you see in your design? Have you made an A/B-test with different designs? I think you need to narrow down this question a bit, 'cause now it's very hard to have a single answer that is the "Correct Answer".
    – Benny Skogberg
    Oct 25, 2012 at 6:25
  • Firstly thank you very much for feedback. I realize, that there is no "correct answer" I asked the querstion to gather your opinion on a particular pattern. The pattern I shared with you here is just at "an early PSD stage", it will be up to my client to use or not to use such layout and behaviour. So no A/B-test is possible. I just wonder if you have any alternative to my solution in mind.
    – Maxim
    Oct 25, 2012 at 7:02
  • 2
    Thank you, I'm trying to help! Usually, a Q&A-site is a bad place to ask for opinions - since we try to deal with facts based on research or test. However, you question can still be valid if you add an image of what you think (instead of a link) and elaborate your design thoughts. Why does it look that way, and why didn't you implement this, and so on. This increases the likelyhood of getting a good answer. So my suggestion is to edit the question and try to narrow down the scope of it - and hope for the best. Good luck!
    – Benny Skogberg
    Oct 25, 2012 at 7:36
  • @MaximArtyushenko I agree with Benny, in this form your question is a bit too broad to reason around. Provide more context, your thoughts, the wishes of your client, if one option is more likely to be used than the other, if the client would prefer one to be used over the other etc... what even you can think of that would describe the situation better!
    – AndroidHustle
    Oct 25, 2012 at 7:40
  • the image tells me that one of them requires money, and the other is not connected to money at all
    – Sinclair
    Oct 25, 2012 at 9:38

2 Answers 2

Reset to default
2

I think this design conveys the option between the two sections very well. I really like the highlighting of the portion that is clicked on. My recommendation would be to make the secondary options for the left part (companies? payment methods?) smaller. Right now, I think they are too dominant and taking too much attention away from the main focus of the page, which are the two major choices. I think they should be a bit smaller using the extra space as a separation between the top options and the secondary options. (Sorry if my description is more confusing - I'm not familiar with the language of the video and page.) Since they only appear when you click on the left box, I think that is obvious enough that they are related and they don't need more attention.

Improve this answer
1

I don't believe there is a specific design pattern for your exact example. But you want to combine a Tunnel with the Wizard. You might also consider the Good Defaults pattern if you feel there is need to influence the decision of the user.

Improve this answer

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.