If my problem is confusing to you, please refer to the image above.This is regarding to an app I'm designing for a small local railway.In which you can search for train schedules.
I second the recommendation to change the "+" to something clearer. Maybe "advanced" or "filter." If you do decide to keep them hidden, consider adding a "filter" option on the search results page to make it easier on users that missed it on the first page.
Thank you very much for your suggestion.At the moment I'm trying to keep button purely as a symbol.But if all else fails I'll simply expand the button and add the text.As the last resort, I changed the plus button to this.What do you think?
Giving a user more context is always better for usability. If you want to stick to an icon, maybe reuse your clock icon to clarify what tapping that button will do.
Agree with Nathan and my two cents: 1) Work more on visual hierarchy - add some other color to increase the contrast to indicate the flow better.
2) Think about positioning of the "Search For Train" button. As it is connected with the form, it's very far from it (See gestalt principles).
What do you think of "Specify trip" rather than "Advanced/Filter", to provide more condensed context of what the button will do.
i think it's perfectly fine, as long as you are sure they are rarely used and can set these optional fields to a useful default.
though, i would suggest changing the "+" button to something a bit more indicative of what's hidden. it's a bit ambiguous in context -- my first instinct was that the "+" would add another destination. a "more options" label or similar would help a ton.
I agree that + is indeed ambiguous.Thank you for the text suggestion.I hadn't thought of simply adding a text.However that means I'll have to expand the button.What do you think of this? It replaces + with the three dots.Which is somewhat universal for 'more'
It looks like those extra options are about date/time, so you might be able to label them very clearly with "When" or something similar. While only using an icon might feel nice and clean, clarity should be the priority for an interface like this.
I agree with Todd. I think you can get away with a label and icon while still keeping it nice but clear. Maybe something like this http://pasteboard.co/fpd6yi9vL.png
Maybe try an 'Expand More' icon https://material.io/icons/#ic_expand_more
I think "best UX practices" is a myth. The best solution is the one your users understand :)
I disagree with the "+" because it's frequently used on apps to create new items. You're not creating here, you're expanding. I liked the idea of using words, like "More Options."
I agree with the + over ... but I would also adjust your contrast. It's a very hard to look at and read.
Yes, I agree. I would also add a darker shade of that color to balance out. It's very bright.
It's good to let user expands/hides rarely used items, but there are some problems I guess you should consider: • Visual hierarchy • Contrast issue • The different between inactive/uninactive components • Especially, there are some unnecessary shapes/lines that add a lot of noise to your design, let's try to think about it, remove some and compare to your old design
Hope it helps!
The reason I hide most search options is that I needed to trim the UI from clutter and because most people don't use the advanced options as timings.
Just in a general sense -- this is one example of progressive disclosure, so look to that pattern for other examples that might be good for your problem.
I think you could get away with just using an icon inside the box (no button). IMO the way it's currently rendered looks pretty close to the primary button, which also gives it the same importance.
A subtle chevron icon might solve this by making it look secondary.
The reason I hide most search term is that I needed to provide the UI from clutter and because most people don't use the exceptional options as timings.
It's great to get constructive feedback from other designers, but the only way you'll know if your users can understand your interface design is if you test it on them.
Create a simple prototype in Invision and do a simple user test on 5 train travellers asking them to search for tomorrow's train schedule from X to Y. This will force them to use the hidden filters (if they can find them).
My guess is that most user's won't find the hidden filters as there is no context around the button to show them. Since the hidden filters are all about defining a 'date/time' you could try using a 'date/time' label on the button to provide an appropriate affordance.
Hope that helps :-)
Would it be an idea to provide the "Select date" field as inactive once the "Locations" have been filled in? And that when you decide to click on the "Select Date" field, and have filled it that it will show the last field that allows the user to specify the times?
if you have a prefilled time / date field defaulted to NOW, that can be changed once clicked, that would be clearer than an expander icon. It may be rarely used but it's an important parameter for a specific subset of users, so set the most common default it but have it visible.