Tag Info

Hot answers tagged

11

It would not be inappropriate to remove a dedicated fast forward (FF) or rewind (RW) button from a digital video UI. What are they designed for? FF and RW buttons were designed to move quickly through physical tape media. In the case of the image below a cassette tape, but they showed up on media before this. There was no practical way to move forward ...


6

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 ...


5

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 ...


5

Don't highlight the row Table layouts present data cleanly using grid alignment. With grids, you don't need a lot of emphasis to draw a user's attention, so highlighting an entire row is overkill: it damages many of the benefits of a grid layout: The layout will depend on how you are using percentages If the user will need to compare percentages ...


5

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:


5

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 ...


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

Effective design is more important that exciting design If this is a system you want users to feel comfortable learning and using frequently, your primary goal should be to provide an interface (including a set of colors) that allows users to manipulate their cloud files as quickly and effectively as possible. Once that goal has been accomplished, you can ...


2

On a large screen, progress bar does indeed provide FF and RW functionality. This is not true for mobile devices with small touch screens - it is very hard to achieve accuracy better then 10% if video player is used in portrait mode using a finger and a progress bar. For longer videos (longer than half an hour) on such devices progress bar is nothing more ...


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

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 ...


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

Userexperiencerocks website illustrate it perfectly like this, no software in sight.


2

Smashing Magazine published an article on mobile wayfinding that I think is pretty helpful: http://www.smashingmagazine.com/2014/10/13/wayfinding-for-the-mobile-web/ None of those solutions are wrong, but given the choice, I'd probably use the "nested doll" approach as my starting point. It's a familiar pattern on both iOS and Android and would eliminate ...


1

44px is the minimum recommended size for tap areas. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html As with all UI objects that users might want to tap, ensure that the minimum target area for each item in a collection view is 44 x 44 points. 16px is a default margin, from the screen edge, ...


1

I would recommend sticking with Bootstrap as it is more design-agnostic. Use it as a starting point framework and build it to your design specification. Material Design is strong in it's statement about how everything should look, feel, and work. This is great for google to create consistency across it's products but likely not a fit for you unless you want ...


1

One option to show when a single user is logged in via AMcharts is their Step line chart. I am thinking of two states for the y axis logged in and logged out. And the X axis represents time (you could only show time when the events occur along with some references). See the following mock up The following is a similar design for multiple users (ie look ...


1

Yes, it make sense ...if the only other choice is a 1-line input box. One line input boxes are terrible for editing long text (i.e. significant box overflow), for reasons that are almost completely obvious. They're bad on the web and even worse on tablets or mobile phones. If you have no other way to create space for the long paths, then a multi-line ...


1

In response to your comments my answer is this. If it improves the user experience to be able to see and edit the file name and path by breaking it over multiple lines then I would suggest its sensible to do so. As long as you keep in mind accuracy. Perhaps a better suggestion would be to breakdown the file path into it's constituent parts and allow users ...


1

If there is a special interraction with this file path that start a special event in your application, you may make it larger. The multi-line choice can be confusing if the path is totally filled : So I do not recommend to make it multiline. If it is a common file path, moreover next to Browse, make it one line and aligned with the rest of the ...


1

Indeterminate checkboxes are not a good idea ...but if you must use them, the two common styles are shaded (windows approach) or dashed (mac approach): A key issue with the mixed/indeterminate state is that once the user makes a selection (checked or unchecked), you have to either: Provide a way for them to get back to the indeterminate state (e.g. ...


1

The most common way to represent a multiple state selection with a checkbox is to give it a dash. In the example below: all students have "Lorem" selected, some students have "Ipsum" and some don't, nobody has "Dolar". download bmml source – Wireframes created with Balsamiq Mockups In the case of radio buttons your best bet is to just leave ...


1

I think icons are fine to a degree, however when you need to display information that isn't easily represented by icons, I'd revert to text. In use (sorry I don't have the same icons, hopefully you get the picture)


1

WCAG guideline 2.1 (Compliance level A - highest) states: Make all functionality available from a keyboard. If the function of the button and the dropdown trigger is different, users must be able to access both. So first "A" then "B" is the answer. Then comes guideline 2.4.7 which state that each should have its own focus indicator. I think your ...


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

Even just 5 years ago there's likely be strong consensus that links are for navigation, buttons for interacting with data. But you won't find that consensus today at all. Today you're as likely to find a button for navigation as a link to interact with data. And that's OK as long as thought was put into it so that it is usable for your target audience. I ...


1

One of the major problems with online form design is that many of us try to simulate a printed form, assuming it is effective because it is familiar to the customer. As I'm sure you are aware, Luke Wroblewski has done some excellent research on online form design (Link to one of his articles is here: http://static.lukew.com/webforms_lukew.pdf) Even though ...



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