Tag Info

New answers tagged

0

I see a number of potential issues with that spell checker/corrector UI. One issue is that it clutters up your text, your (possible) errors are much more front and center than the traditional underline that indicates a possible spelling error. With the correction suggestions inline it interrupts the flow of the text. With the corrections interline it ...


2

Two suggestions to try, 1) change the wording "new" to the wording you use in your question. E.g "write on ease", or "write an article". 2) try some highlighting techniques, maybe a subtle bit of animation, transition or some other such "look at me" technique (colour, size, position). You could make this personal, even if they are anonymous. E.g only ...


0

Here is my solution as my background is Interaction UI Design... Why don't you add another control for Strict and Loose Matching criteria, it will simplify things See my solution below LEFT is strict Matches and RIGHT is all possible matches


2

I dont see an issue with the naming. We had a similar issue in one of our applications, the solution was to display a column after the sorting with the number of days remaining along with the actual due date. Due in X Days. Although, I believe these labels are more common: Due date soonest first Due date latest first


1

I think your design and terminology work fine: Dropdowns are a common and proven approach to sorting. Your labels are clear. Sorting future dates is not an easy concept to convey, and you've done it in a clear manner. The only additional suggestions I'd have are small ones: It's common to offset the title of the menu item from the detail, for example: ...


1

Under normal circumstances I would say don't show progress bars for completed processes, especially if you are showing a list of jobs in various states of progress. It should be easy to quickly scan the list and identify the major categories of in-process: not started, in progress, completed, and if applicable also paused and failed. It is much easier to do ...


0

The scenario says the two MODES. These modes must be indicated visually, by a color coding. Subtle changes can be missed. Here in this case, there is significant change. The UI is communicating with a physical device and in other its not. Just updating. A distinct cue of two modes with color. That will be a strong visual indication.


0

I agree that changing the input method for this does more harm than good. It's both inconsistent and confusing and will probably send at least some users thinking about the why. They will never guess it :). You can provide a strong visual distinction between the two modes, like a different background color for that area, and an icon for both modes, not just ...


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


0

If you are developing an iOS app, you should probably use the Picker control. As detailed in Apple's iOS Human Interface Guidelines: "A picker displays a set of values from which a user picks one."


0

As Ben suggested you need Both. I have been studying a lot of UX books but the type of knowledge you gain from online communities, webpages and magazine articles is very useful to get you ready for the job, getting a view of what is really happing out there. The book themselves can be categorised to more practical, experienced based books (e.g. Lean UX) or ...


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


0

There are two design strategies I can think of, and I think it would depend on the actual content that you are putting into the cards. Option A - associate action with content, assuming content is modular and act as subsections within the card Option B - separate content from action, assuming all actions are relevant and apply to all content (where content ...


0

Check out this easy seven step tutorial - iPhone UIButton tutorial: Radio Buttons by Mobisoft. It is what I have used for the past couple of years. There is too much code to replicate here, so beware of link death in the future. The steps are below: Create a window based application in Xcode and name it “MIRadioButtonGroup”. Create new ...


1

iOS doesn't have a default radio button. You can either use a third-party plugin to create a custom radio button like this or you can use iOS other default elements: a picker a switch


0

UIPickerView You may want to use a UIPickerView for something like that. https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIPickerView_Class/index.html UITableView There’s plenty of other alternatives that could be good, it really depends on the app’s structure. You’ll notice that lots of the options in Settings use a ...


1

Usually this is done using a table view, which is basically a list of items as well, only with a checkmark instead of a radio button. Sometimes such lists are on a new 'page' in the navigation structure. How this fits in your navigational structure depends on the context.


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


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


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


0

A quick solution is to get rid of the type column and just have different size columns: But you mentioned that it will have a lot of columns so maybe the better solution is to seperate the table into one per type: The reason for these two ideas come from one question I have with your current table concept: Why do you have a table with incomparable ...


1

A simplified approach can be as follows download bmml source – Wireframes created with Balsamiq Mockups This would show the user how much time is there for the popup to close and also enable him to prevent it from closing as well. The close icon on the top right enables him to dismiss even before the timer runs out as well. This said, I am ...


1

What I would do is show the controller or whatever the external device is. Then grey out every button minus the botton you are mapping. Then show a keyboard below it. As you animate the pressing of the 0 button on the external device/controller , animate the pressing of the A button on the keyboard with everything greyed out. Do the same for all the ...


1

If somebody writes 40% it's clear that it is a perecentage, and not an absolute value. Why not use that? If the last character in the input field is an '%' you can store the value as percentage, otherwise as an absolute value. Next to the input field you could show an hint like 'enter absolute or perecentage value'.


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.


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


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


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


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


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


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


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


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


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


0

Wireframes are best for focusing the discussion around the 'form' of the design, whereas prototypes are best for focusing the discussion around the 'function' of the design. Of course, given the amount of overlap in the different tools and methodologies, you'll find that the terms are interchangeable, but regardless of the term, you should understand what it ...


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


0

The cognitive perspective From a cognitive perspective, here is the likely sequence of event: User sees page An info message asks the user to change her password The user fills the 3 fields An validation error has occurred At the point the user already know the purpose of the screen, so there is no point for the information message to stay there - it can ...


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


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


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


0

If you do have access to edit the front end, I would probably suggest using indicators on the field/field group (such as "has-success" if you're using bootstrap). Then I would suggest that maybe the 'info' error isn't necessary once they've made an attempt. Or instead of using an alert, make that the heading for the section.


0

In general, error states should clearly communicate where an error occurred. In your example, you haven't clearly shown which state is the problem. Additionally, you have two competing messages here. It seems like these two alerts could easily be consolidated into one alert. Finally, watch the language you use. You say "Old password appears to be ...


0

Generally speaking you can but the message texts have to be very clear and non-confusing. The biggest, read confusing, issue I see here is that the message in the orange rectangle does not clearly communicated which field the user has to change: 1, 2 or 3? Neither the message in the red one is 100% clear. Some users will wonder whether "Old password" ...


0

The Google Material design guidelines on cards is a good read, recommended. You didn't specify whether your cards are of equal size or not but based on not "mess up the grid" they probably are of equal size. Grid of different sized cards is a possibility but you should be extra careful not to overload them with actions. From Google Material design: ...


1

I ended up changing the database to accomodate a simpler UI. One example of a nested query may have been, "Show me all regions where member data hasn't been uploaded in the last 30 days". The query would look like (pesudo): SELECT region_name FROM region WHERE region_id NOT IN ( SELECT region_id FROM upload_history WHERE upload_date < ...


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


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


1

Before I proceed to answer your questions, let me point you to the part of the spec you quoted, which seemingly deems your dialog too complex: Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive. This part of the spec is referring to the action buttons that populate the bottom of the dialog, and when ...


1

First thing I thought of is how would Google do it.. so I opened Quick Office and they don't use either a dialog or a navigation drawer. When you select the "+" on their toolbar you get a Menu with the option to add an image from your library or to take one with your camera (plus other options not image related). To answer your questions: I would say no. ...


0

This would take a more work, but I think it would be pretty slick if you could mimic the behavior in Mac Mail when searching through emails. You could just have one big search box and allow users to just type in keywords. For example, in Mac Mail you can type "from:John" and it will search for emails from John. In your example: "Show me all users ...



Top 50 recent answers are included