Tag Info

Hot answers tagged

27

@Mayo has, I think, the answer with the clearest affordance. But, if the discount field is going to be used frequently, an approach that has been proven to work with many professional and productivity application is the polymorphic input box. Applications like Microsoft Word, PowerPoint, Photoshop, AutoCAD, Illustrator, and others use these boxes ...


18

You could use a toggle switch ABSOLUTE | PERCENTAGE and have the user select which one he wants to use. For example: (don't mind the $ sign I did it quickly) and let the user select between the two options. This format works very well in use cases that I deal with. Buyers and bidders have to make numerous (100+) decisions in a day. It's easy to select ...


13

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


6

I recommend Gustav's option #2. You can give both, allow both to be editable, and have the counterpart update to reflect the change, either as they type, or upon the input field losing focus. This would also take care of the need to round. I could type 20% for the discount, and then tab to the absolute input field and round to the nearest dollar. In cases ...


5

The container zoo The terms card, panel, tile, and others are often used interchangeably, so their definitions not precise and can change from company to company or ecosystem to ecosystem. But, there is a loose vernacular definition for the different containers. Why does it matter? Because in practice, naming things is important. Here is an example of ...


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

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

The answers so far all focus on ease of understanding. This is important, but if the tool will be frequently used, ease of use is also something to consider. If the typical user is likely to use this feature many times, I would let the option be set by typing % or a currency symbol directly in the field along with the value. This will allow an expert to ...


5

A simple icon can clarify what units are implied in each case. This should solve the problem of the user inadvertently copying the units along with the actual value, and get a quick mental feedback of what's to be expected: EDIT: See Tohster's answer below, which appeals to me as the better solution.


5

When mixing data units, explicit is better It's very easy to confuse mixed units in a table, so best practice is to make the units explicit. If you can avoid this situation (e.g. using sections or different columns) that is usually better. But sometimes it's unavoidable because of space constraints, or for other reasons. Avoid using icons because it ...


4

If I understand you right, this is an app for the teacher, to record attendance of students at each lesson. Put yourself into the teacher's shoes (or better, interview a few teachers) and think about the entire process: What is the teacher's motivation? A requirement by the school? The need to factor attendance into grading? You may identify ...


4

There probably isn't objective answer to this question. As you said, if Microsoft, Google or Oracle doesn't seem to agree, how could we? My view is mostly based on Google Material design on cards and Microsoft Metro tiles. To me a card is close to what Google calls cards. Metro tiles and tiles in general are more homogenous items that may have some actions ...


4

Gaming popups have some different constraints For many games, notifications/notices are challenging to design because the user will be focused on the core game play: So, designing notifications is difficult because you have to make sure the user sees the notification, but it cannot be so intrusive that it takes the user's focus away (in space or time) ...


3

Meanings of colors vary by culture. Of course, a few colors have similiar meanings everywhere, for example gold stands for sucess and high quality in most cultures. On the other hand in the U.S. white signifies purity and is used at weddings, but in other cultures white is color used for death and funerals. It's very likely that the authors used meanings of ...


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


3

I see 3 options: 1: The switch. download bmml source – Wireframes created with Balsamiq Mockups Use common symbols like $ | % 2: Show both. 32.43 (0.64%) 3: Take over responsibility. And decide what's the best for your users. Ask what they want to see, why they want to see it. Marketing purposes: go for the one which suits better ...


3

The Design Apps for the Windows Desktop page has all the information for Windows 8 desktop applications. For example - in the Controls section under the Text Boxes subsection you will find the "Recommended sizing and spacing" section, which has the following picture: Other sections have similar treatment. The Interactions and usability with Windows ...


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


2

I think your beginning is a good way. I recommend you to read a short introduction into user-centered design. First you need to get your user requirements (who does what and why, what is the environment, life cycle, ...). You started already, but in your post the requirements are too generic, too formal - I guess that humans will using the app? If you have ...


2

Given the complementary nature of the two functions, I would visually place them next to each other, with a tooltip or some other text hint educating on what result can be expected from each interaction. Don't make the user go in multiple directions to "vote" on a selection. To support a user's ability to undo, I would also explore a global "clear" or ...


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

There are some variables that you could take into account here to express time: "Shapes" getting smaller Seconds (numbers) decreasing Color Maybe you don't need to use all that variables, but I made a mockup with all of them to get the idea. BTW "wait" and "close" are the first words that came to my mind, but since I'm not a native English speaker, you ...


2

It is possible that I am not getting your requirement right, but are the radio buttons essential? Can you instead provide something like, On click of the button, you can provide the confirmation dialog, notifying the user that it is a non reversible action. Next time when user visits the page, there can be a notification label specifying that the ...


1

Error messages and helpful information are very different, so they need to be visually distinct In your layout, the error message and the information message are shaded differently, but have the same font, shape, and placement. This visually communicates that the messages are similar but not identical. That is not true: helpful information is the ...


1

1. Cards - 2. Tiles - 3. Panels The short answer is there really is no difference between these terms. Any of these can be any size and I've used the terms interchangeably on various projects. We should adapt to use whatever terminology the rest of the team is comfortable with because very little can be gained from spending cycles trying to make a ...


1

I think based on the naming scheme for the themes that it might be more of a semi-random convention rather than anything else. In fact, I think you'll find it very difficult to stick to the convention and expanding on it simply because of the ambiguity in the naming scheme. If you examine it more closely: light: could be referring to colour or weight, so ...


1

There are many different color-semantic mapping schemes, but most have some basis in color theory. Color theory is quite expansive so an explanation of how specific colors are matched to meaning is probably not suitable for UX.SE. Fortunately there are a lot of resources available to help you work through this. The term you want to look up is "color ...


1

In regards to the specifics of video playback, regardless as to whether or not there is something "before" my current playback, the "<<" is what I look for to instantly rewind to the beginning. And if the ">>" has no meaning, then don't include it. MOST IMPORTANTLY: If the GUI element will never be used, then it's MORE disorienting to the user to ...



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