Tag Info

New answers tagged

1

This looks like the time selector introduced in Android KitKat; From a UX perspective this UI works well on touch-enabled interfaces but would be a lot less intuitive if used with keyboard/mouse. There is a useful overview of mobile time picker UI's here - http://blog.iangclifton.com/2014/01/22/mobile-time-pickers/ And also a nicer looking ( to me ...


0

I admire the effort of mimicking an analog(ue) clock face, but I think you're oversimplifying things into complexity. The first point of hopefully constructive criticism is, in full honesty, one of my pet peeves as a non-native English speaker; the AM/PM thing. If your target audience contains a significant amount of non-natives, you might consider showing ...


0

Two options Detect tap/touch/click outside the input box and search results (if you wanna avoid x button) Go with traditional x button But users might not know how to close if only option 1 is implemented, until they try.


1

From my comment above. One way of implementing this is to add a little gray 'x' symbol at the end of the input area, that when clicked will clear both the input area and the dropdown results. This system is fairly widespread so users are likely to understand it (for example, Windows Explorer's search box uses this). However, you can always add a caption ...


0

A disclaimer first: I'm firmly in the camp of people that believes we should write labels, buttons, headings and other UI elements the same way we would write a sentence. This means "Sentence case", as opposed to "Title Case". Having said that, I'd write it like this: You must enter an agency name if an agency state has been selected. Please enter an ...


1

Regarding the rounding error, if you store in the unit they entered initially (or as a single type of unit), and then convert on display, you should only get a small rounding error but it shouldn't be compounded. Regarding the switch, I think the answer depends on why people would be switching back and forth between units. Wouldn't they typically just use ...


1

The absolute best solution I've come across is a column chooser where each user gets to choose the columns that they want to see. Large grids like this tend to come about when lots of different people with lots of different data requirements all use the same data grid for different purposes. In my experience, implementing a column chooser allowed me to ...


1

This is an answer based on my comment above. Looking at it from a user's POV, I'd like it if each section was clear and it was easy to read and understand what I can do where. That gives me that idea that you could organise your page into two main sections: current keys (categorised) and generate new keys. Here's a mockup of said design: I think this ...


0

And yet there are times when ALL the columns are necessary - and there are too many to fit the available space. I've faced that problem. Hiding columns doesn't work as the data is necessary. In one example I partially solved the problem by reducing the text in some of the columns. For example the user scans the columns to know which competitor (8 ...


1

This may be altogether wrong, so don't mind it in that case. But I like the way you can control your sessions in facebook (on the URL https://www.facebook.com/settings?tab=security&section=sessions&view). There you have control over where you're signed in, when to end it or keep it going. It's not the same as your problem, but having a list like ...


0

I've seen something like (don't remember the exact website) where there's a big ":(" saying something on the lines of "i don't have any favorites yet" followed by a CTA to browse more. i think it adds a human touch


0

It is really difficult to do a comparison study between different websites because there are so many variables that affect the end result. However, if you are looking for general areas to work with, I would suggest the high level metrics like task completion rate, SUS scores and NPS scores to compare, and then use it to highlight areas of similarity or ...


0

I can add that involving the developer in design discussions early would help you identify "brick wall" problems like you are facing early. For example, customizing the navigation bar title or logo can be pretty hard, because it is not a drag and drop, but configuring an "attributed string" to go there. Ask your developers if something will be hard to ...


0

I am not aware of any books or articles, but I do have a few thoughts on principles. I would look more at the tasks that the user is performing rather than the type of interface that is being built. For example, which of the columns on this page will the user need to quickly skim before choosing which one to read/edit next? Or does the user review each row ...


0

you could create a few categories that the buttons belong to and group the categories so that the user could hover on. maybe the commonly used ones pinned. similar to how photoshop groups brush,gradient,pencil or crop/slice etc.


1

My Video Cassette Recorder solved this in a very nice way. On the page 5 on PDF Reader (3 on the physical document) of the Philips VR 668 User's Manual, you can see at the right of the device "kind of a wheel" with the buttons for controlling the playback state. That strange symbol at the top is the Pause function ; I think they made it different from the ...


0

MFC/Visual C++ has Pushbutton like radio buttons. I think this could be the right answer for you. Imagine the MS Word buttons for Align to left Align to centre Align to right Justified all not pressed and you have the unset state you are talking about.


4

Two things I can suggest to improve that interface: Eliminate that lines between rows and use a different background colour for even and odd lines. The contents of sorting column should have a highlighting, like, marking it with a different colour in the background or changing some attributes of the text, like boldness / font, etc. UPDATE: U3. Make the ...


1

<< | >/|| | >> | O Back - Play/Pause - Forward - Stop From a UX perspective I see it this way. Keeping the stop button is necessary, its an easy way to start from the beginning again. At the same time it needs to be a little away from the play/pause button to avoid accidental stopping of media play. Color code the same as it used to be on the dvd ...


1

Yes. It is generally: |Back|Stop|Play/Pause|Forward| These roughly correspond to a timeline, as if one was scrolling horizontally through the video.


5

If you think of a video as a timeline, then for western cultures, the intuitive order would be: << | > | >> See one of my other answers for more information about direction as it relates to representing time in an interface and how the common left-to-right paradigm is representative of western culture's influence on technology. Back ...


0

Mosaic Interface Since "tiled" implies regularity, I'd call that a "mosaic" interface to include tiles of various sizes/orientations.


1

I've not specifically heard it used for UI but I think the word to describe it is "tesselated": Wikipedia article (includes many forms of tessellation/tiling) Google Image Search If someone said a UI was using "tesselated irregular tiles", I'd understand a Win8/Flickr photostream/Pinterest type layout.


0

You could use multiple screens, much like how you'd drag an icon on the home screen from one area to the one next to it. Here's a quick mockup.


1

If every given user is likely to always seek for the vital information about the same small set of compressors, you might want to : include a "main compressors info" section in your dashboard and make it very visible, hence serving the need you mention without adding an extra step populate this section by default with the data regarding the 4 or 5 "main" ...


0

Retrospective justification You can borrow various cognitive principles (cognition here refers to any brain process) and even some research to justify these trends. But in most cases first the principles were established and the research was done, only then people attached them to these new trends in order to explain them. Not about usability What is ...


1

The best icons (I.e. The most visually distinct) are those with distinct outlines. If you were to remove all colour and shading from your icons they should still create distinct outlines. If they are all square or circular then they will not be as easy for users to distinguish between. A trend is fashion, visually distinct icons are based in the biology of ...


0

Regarding the visual design-- the highlight is (and should be) as discreet as it can be, short of being invisible. When you're not interested in which element has focus (which is most of the time), a prominent highlight would distractingly emphasize some random item. The one time when you do care about focus is when you are changing it, particularly by ...


2

In addition to moving the "call to action" into the white space, you can add some more possibilities there to construct playlists. Examples are: Top Played Newest Additions Genre XYZ Genre ABC Import playlist from a friend etc. I kind of agree with the downvote for the "default playlist" since there is no useful default, I guess. But a single ...


2

I'd suggest putting in some default sample playlists. That way they know exactly what can be placed there. UPDATE: Given the downvotes, I assume there's skepticism here. This is not an uncommon pattern. For example, for those of UX folks that have used InVision, you will notice that when you first log into the application, there are sample projects ...


9

One method that has become more popular is to actually put the call-to-action in the whitespace itself. That way once the action has been completed the space will be filled and you won't need the call-to-action there anymore. Other ways of dealing with whitespace is to provide instructions or messages that encourages the user to perform the action that you ...


0

I would have all fields pre-filled except the ReCaptcha If the user enters an email that is already in use I might redirect to a log-in page with the email pre-filled. (with an option to go back and have the form still be pre-filled) This is of course assuming e-mail is the username to log in. Otherwise there could be an option for sending a username ...


0

The hit-box for interactive elements may vary, and can be outside the visual button itself. When highlighting, you show the user that the item will be interacted with by clicking. A Label for an input field is a good example. If you have implemented it correctly with the correct "for" - that should be the same as the input fields "id", a hover on the label ...


1

As avi said, it shows that you're pointing to it. This is obviously useful if you're not using the mouse, as others mentioned. But it's useful even when you are using the mouse, even though there's a cursor that ideally also shows what you're pointing at. For example, if your cursor is on the edge of an element, it may not be obvious what's going to happen ...


0

I always like to support the most common behavior as much as possible, then treat the secondary behavior as an alternative to that. For example, if most users send to a work group, then show that option in the form by default. Add a little link or toggle to change the form to allow for send-to-individual. This saves most of your users from stopping to make ...


0

How about graying out (disabling) both the inputs until the user has selected one or the other mode (via radio button)? Then you enable the appropriate additional element(s). That way, the user can see "what's coming up" without actually being able to enter anything, and can plan their course of action better (they can see what data they'll be asked for once ...


9

After doing some reading it seems that the highlighting in fact does help the user as people have come to be reliant on the UX/UI guiding them through the page and showing where they are focusing as well. For example if a user is filling out a form and using the "tab" key to jump from area to area they want to see the focus highlight change from what they ...


46

There is at least a single benefit for those not using a mouse - Normally you are able to tab between input elements using the keyboard, this is an indicator as to which element currently has your focus.


2

As others have said the differences are small, but there are a few details to make sure you get right: If any content is covered (options 2 and 3), there needs to be a clear, simple way to get rid of the covering, for if someone hit the search icon by mistake or changed their mind for any reason. This might be a point in favour of options 1 or 2: with 2, ...



Top 50 recent answers are included