Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I need to design a responsive website with many widgets and forms. I want to provide the best UX to mobile users also when they interact with forms, which is often a nightmare on mobile.

You can find the form I am dealing with attached. With input text I have no problems, but I might want to substitute the select box with something more mobile friendly. Any ideas?

enter image description here

share|improve this question
    
A responsive example from Norway, with a similar goal. (google translated) translate.google.com/… –  Bluewater Dec 4 '13 at 13:53
    
they use select box also on mobile –  Giults Dec 4 '13 at 14:15
    
it depends on the number of options you provide. if you have few options you could consider using radio buttons. if you have more than ~3 i'd use the dropdown. –  L. Möller Dec 4 '13 at 14:38
    
I want to add: typing on mobile sucks. so use text fields only when necessary and try to use suggestions and default values whenever possible –  L. Möller Dec 4 '13 at 14:40
4  
Why not just use the default controls and let the mobile OS handle how they're displayed? –  JonW Dec 4 '13 at 15:11
show 1 more comment

3 Answers 3

Giults I would propose a solution like this (inspired by the KBC home project app for iPad - I would show you a screenshot, but I don't have my iPad with me :) ).

1. Slider bar

It would be possible to user a slider bar instead, perhaps with fixed points per fixed frequency point. In some app's I know the slider is used to chose the term, but it might be useable for this case aswell.

2. Picker

An alternative is using a "Picker" which is also (in my belief) quite user friendly. This would most likely introduce a scroll bar within your app aswell.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
add comment

Thomas beat me to it. I would recommend going with the Picker Wheel. It's part of webkit.

select wheel

share|improve this answer
3  
It's not obvious if you're talking about simulating the native interface spinner interface, or simply letting the device handle display itself, but if it's the former it should be known that this interface would feel extremely out of place on some platforms (e.g. Windows Phone). –  Kit Grose Dec 5 '13 at 1:46
add comment

I highly suggest leaving the OS with it's built in default drop down menu UI.

do not break a standard if there is no reason to

This is important. Why recreate something that isn't needed? If you change the UI that has remained consistent throughout all sites but then suddenly when they land on your application it's something entirely different, confusion will occur.

Stay close to something that has universally remained the same.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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