Tag Info

Hot answers tagged

33

Some comments: The Go button size should be bigger and present the best contrast of all since it's the primary one. Clear is okay because it's a secondary action and it should be neutral. For me the Switch button has too much presence both in size and constrast. I'd position it between the Origin-Destination dropdowns, where it make more sense "by it ...


9

One solution is to visually separate your button by priority. You'd typically have primary button(s), secondary button(s) and sometimes tertiary button(s) and/or non-preferred action buttons. For Primary and Secondary, I usually suggest your preferred branding color (purely subjective) in two levels of contrast. High contrast for primary, slightly less ...


8

I like the way Facebook and other show lists of people. A possibility would be: No selection: One city selected: Two cities: More than two: Hover to see selection without opening (maybe with something more elegant than a title attribute): *Finally, if all options are checked:


7

Buttons tend to convey actions, while it looks to me more like these are navigation links. Showing them just as regular links (following whatever style in your app) would be probably be much less imposing both visually and as an action to take. You can also take this a step further, and provide some more useful information instead of simply displaying ...


5

A few options: You could leave a little bit of content above the fold where possible which will help to indicate there is more below. You could build anchored links into the copy that will take people down the page e.g. 'We're amazing designers' with the word designers taking users down the page to the portfolio section. An arrow can feel tired I agree. ...


5

Your current approach is heading in the right direction. When your users use this data regularly, they will already know the relationship between the groups. Switching background color is one way of creating contrast between groups. Other ways would be to use line separators and white space. One thing you can have do to make it more obvious is by ...


4

Centering the ad would break the grid layout The YouTube interface is dense with hierarchical information (main video, info panel, comment panel, suggestions panel, multiple nav bars, etc.) To organize this complex information, YouTube uses a grid layout pattern to provide clear lines and rectangles of organization. Grid layout are proven to help ...


4

Think about what your users need The magnifying glass is a very well understood idiom for zoom, so it's probably the right cursor to use. The use of inset (plus on the inside) vs offset (plus to the right) will depend on the size and use of the cursor. For example: For large cursors the inset cursor is visually simpler than the offset cursor, so option ...


4

Material design provides the following benefits for web apps: It is a comprehensive UX + style framework, so it can speed up both design and development. It promotes responsive, multi-client user interfaces, in the sense that keyboard + mouse is a first class input method alongside touch and voice. So if you need your web app to work with mobile/tablets ...


4

Use grouping horizontal lines and eliminate the verticals one. Horizontal lines helps to lead the eye along the line, while vertical lines become a barrier along the eye path:


3

On my personal preference it's sometimes (or most of the time) convenient to just get an idea of battery status by having a look of filled or empty status of battery indicator (Like the one with default battery indicator ). Though, I am supportive to your idea of saving the space and moving the % inside battery icon but then we will have to take care of few ...


3

Clear buttons are normally provided when the field is being used affect a default view and the user is likely to want to return to that default. For example, to filter the list of all products in a catalogue and then to return to the unfiltered list. It's easier and more intuitive to click an explicit 'clear' button than it is to highlight the contents, ...


3

The table is distracting because of: High contrast between the buttons and the tables. Grid layout of the buttons creates an unfortunate grid illusion The palette is visually distracting: you have banded rows already, and then are superimposing a saturated darker blue. That's a lot to deal with when the eye already has trouble navigating a complex table ...


3

Are all 4 buttons equally important? It might make sense to have the main action as a full button and tuck the rest into a button dropdown. It'll make it easier for users to tell which is the main action and still have the rest be accessible is a touch friendly fashion. The second thing you can look at is button color. The blue is very strong against the ...


3

You want to know whether to use a tab set or an accordion. Both are forms of progressive disclosure—that is, they reveal more content as needed. The answer is "it depends." It depends on how much of your audience needs to see the content, and how often. And it depends on how much content you'll be putting on each tab—especially whether the users will be ...


2

I've used Twitter Bootstrap button groups in the past for this same idea. Since they are actually buttons, and not parts of a slide, I don't think the selected states are confusing (and you can style them to be as unambiguous as you want). I think the bigger question to ask is whether it meets your needs and what you are trying to solve by implementing ...


2

The simple answer is to use a combobox like the following: download bmml source – Wireframes created with Balsamiq Mockups


2

I'm not aware of an app specific to this task but there are a number of Photoshop actions that may help achieve the look you're going for. This page has a couple that may suit: http://designbeep.com/2013/10/04/15-free-perspective-screen-mockups-showcase-app-design/ Actions with potential: Basic Mobile App Screen Mockup, Isometric Perspective MockUp, ...


2

CTA and Buttons Call to action buttons appear in any given workflow to represent and enable completion of task priorities, as such, they are always distinct graphically as well as semantically; a verb is used for example "view" "download" etc So having four buttons in a row creates a situation where CTA buttons are competing for users attention as well as ...


2

Its a nice question! I agree there is confusion among many people and drawing a line between all the branches is difficult. Reason being all the branches mentioned overlaps at one point or other. The answer actually lies in the names but due to their overlapping nature people do get confused. Even the companies while writing job descriptions. Understand, ...


2

Inside the first dialog window (level 1), replace the area where the "Edit" button is with an info box/pane. When you select an item from the list on the left, the item's data (including its sub-items) is displayed inside said info pane. Now, the ability to edit a sub-item's name is afforded by allowing in-place/inline editing — double-clicking the name ...


2

It would be worth testing whether users actually scroll, to identify whether this is a real issue. Consider using various visual cues as discussed above: content continuing below the fold is usually enough to prompt users to scroll. Avoid full width horizontal lines, as these can sometimes cause users to think they are at the bottom of the page. Remember ...


2

The solution here would be to go for progressive disclosure where you first show the list of questions and then tell the user that he needs to select a question. once a question is selected, then you can show the related content. Here is a quick wireframe to illustrate the flow download bmml source – Wireframes created with Balsamiq Mockups


2

The problem with the "split button" is that it is not just one control but that it is presented as one. I've seen people pressing the button while expecting opening the menu. Since they are seperate controls my first impression was to focus on A when pressing the tab key, and focus on B when pressing tab again. But I agree with @AlexeyKolchenko that it ...


1

I would suggest looking into a few of these design guides. Googles Material Design: http://www.google.com/design/spec/material-design/introduction.html Bootstrap: http://getbootstrap.com/ Either one is going to give you 'clean' web ready out of the box.


1

I think its great. You should only add new colors when the new colors signify a different meaning of something. Also having too many colors can confuse users because they may be overloaded with trying to figure out why the color is different and does that signify a different/hidden meaning to the feature. A fair amount of users are color blind adding new ...


1

Use the cursor if you can Image editors have been around for along time so this is a deeply tested approach. Image editing can demand a lot of concentration. Users who are focused on editing image details will have a very narrow field of vision, and will tend to ignore the periphery of a screen, so it's much more effective to have the cursor indicate the ...


1

In order to create an icon like that that would still fit into the notification area it would mean the text of your proposed icon would have to be even smaller than it currently is, this would make it incredibly difficult for those with poorer eye sight/smaller screen devices/lower resolutions to see what the value is. The advantage of the current display ...


1

After selection change the label od a dropdown from 'cities' to '2 cities selected'. This will give user info about two things: something is selected + quick recall of what could be inside.


1

There is only one Submit action in this case - so if possible, try to have only one submit button for both options. The image selector here at this site handles the same problem quite nicely: An alternative solution would be to display the options side by side. download bmml source – Wireframes created with Balsamiq Mockups (You could ...



Only top voted, non community-wiki answers of a minimum length are eligible