Tag Info

Hot answers tagged

18

Here are 3 ways to accomplish a high-precision, trace-style outline without the fat-finger effect. Approach 1: Similar to Kit Grose's excellent answer. A mask gets applied, and you can use brush and eraser to adjust the boundary. The only difference here is, if you need to see the detailed interior of the wound, then the mask works in reverse, i.e. the ...


15

I would flip the problem on its head: instead of tracing around the wound, have the user paint a colour over the wound. Give them two tools; a paintbrush and an eraser. This behaviour is similar to the Quick Mask mode in Photoshop and it works great because you can use a very large brush size at first and then come at the sides with a large eraser to ...


9

I suggest that you use borders on hover. Links have a border-bottom on hover (compare on wikipedia) and a cursor: pointer; that helps the user associate that the image is clickable. At second, add a checkbox to the image. This helps the user understand that it can be checked:


6

Why would you replace a 'universally recognized" pattern for something that does the same but not as well? If you simply want to display a photo, why not combine them both? If you want to save space, you could even place the caption and checkbox on top of the image.


6

Select the first one (or current one) by default, and show this by highlighting it with a border of some kind. This then acts as a cue to the user that they can change the selection to another and that the items must therefore be clickable. And that'll work on a touch device where there is no hover anyway.


4

You can use an offset pointer/cross-hairs above the center of the touchpoint with an appropriate width. This will make allow you to see where the line is being drawn, not being obscured by your finger or hand.


4

The purpose of the hover state is to give visual feedback to the user highlighting an interaction opportunity, which does not necessarily require a visual highlighting. While it has commonly been implemented in a way where a solid and prominent color was lightened on hover, this is not the only valid use. The appropriate use will depend on the context and ...


4

There are several features you can use, which may be combined if appropriate: Status bar. A status bar in the window can indicate that the process is underway or not. Ideally, the status bar will include a progress bar and/or percent done and/or estimated time remaining. If possible, place the status information in the corner of the window so the user can ...


4

Please consider accessibility in addition to the visual experience. I know your question was about visual design, just want to make the accessibility in form controls is considered in this conversation. One way to implement it would be to pair the graphic interaction with a native checkbox element. It also needs a text alternative like a label or alt ...


4

I would propose a third option. Make the button and image clickable It has become a convention that images are clickable on websites and in applications. My personal experience with this is during my time at a webshop where user research pointed out that almost 70% clicked the image of the product in a list of products in order to navigate to the product ...


3

Observations: Given the complexity of the control, I would strongly suggest showing the 'Window' image caption all the time instead of on hover. It's pretty complicated and unintuitive to have the caption show up on hover, but then also have the image itself be a toggle. This is a good candidate for material-design inspired interaction. Material Design ...


3

If comment area and action buttons are disabled during selecting the state from drop-down, you can have the explained behavior. You can create less than 1 sec waiting time to activate the comment area, this will create a connection between drop down and the rest of the elements. I think that it can be nice if you can use a visual element for selecting ...


3

Colors should really match the theme of the site and be easy to the eye. For example, if the site is about valentines day, use shades of red and pink. Most importantly, make sure contrast is good. An example of bad contrast which many websites produce is light grey on white. Visit checkmycolours.com and put any URL in it to see if the website has good ...


3

Aside from what is on that list, when I conduct usability tests I: Try to ensure that I give identical instructions to each participant. When people are doing tests remotely, it's easier to do this as you can provide written instructions. In person, however, I try extra hard to avoid going "off-script" and potentially leading anyone towards answers I ...


2

I really like the idea! however I wouldn't decouple this into two UI features, I would combine them in a single UI like below: which conveys that both comments and contributions are equally important, this is how I have visualised it: I would also add a list of recently discussed subjects along with information about what the user did (Icons). Did he ...


2

Which of these things is not like the other? I tried lowering the opacity to 50% to see how it looked and without the context of the mouse cursor this could be interpreted as a disabled button. With the context of the mouse cursor, however, I really don't think users would get confused. On the other hand, highlighting the button feels more inviting and ...


2

I see your point – but I'll try to explain in two paragraphs why I think it's not 'bad practice' at all, while personally I also dislike this effect. Trying to imaging the opposite approach: every element has an oppacity <1 and only the 'highlighted' element has an oppacity =1 does not feel 'right' or 'better' 'highlight' in the context of a group of ...


2

1. This is a well-trodden problem Digital designers have been grappliing with this problem since scheduling, project management, and manufacturing planning apps were written in the 80's. 2. Graphical representation is non-trivial When you have multiple, arbitrary dependencies, it becomes very difficult to show dependencies graphically. A simple ...


2

“All the world's a stage, and all the men and women merely players” I have conducted usability testing in a number of environments both controlled and uncontrolled and I genuinely believe that there is no silver bullet to deal with bias, but you do have to take precautions and consider impact on test results. Erving Goffman who was a very influential ...


2

I guess there are a few different things you want to find out, and I think for me UX is about asking the right questions rather than trying to find the solution, simply because you can find the right solution for the wrong problem and not end up better off than where you started from. So in order of priority: Find out what you know - you mentioned that ...


2

To give you a concrete example: have a look at Command-T which certainly solves the first of your problems and does use such a dialog (displaying a list of files). It targets developers working with rather large trees of code files, just like the Visual Studio plugin you mentioned. Its core algorithm is based on subsequence matching which is pretty useful ...


1

Establish a UX strategy The application has been actively developed for 10+ years. Unfortunately, there hasn't been much focus on UX when building the application. Shifting focus from a development led process to a UX led process is no easy undertaking particularly when your application has been actively developed for more than 10 years! So you ...


1

Where should I start? By starting over. Any software that's been continuously updated for a decade+ is due for a complete UI rewrite. How you do that is simply too broad of a question to answer with any specificity, but I'd start with things like: hire a UX consultant do a lot of user testing and, more importantly, user research investigate UI ...


1

You can try two pictures: open windows which represents checked state closed windows which represents unchecked state


1

We don't live in that world anymore Some history: The Yes/No and OK/Cancel buttons were created in the very early days of graphical user interfaces (they actually predated that on text screens, but for UX purposes let's start with windows). The constraints at the time were very different from today: Screen sizes and resolutions were a lot smaller, so ...


1

If there are only 3 items in the drop-down (interval, comparison, options), couldn't you could display them in tabs instead of a drop down? Example 1 Example 2 Example 3 This won't work if you've got more than a few items in your drop-down. Also I'm wondering if those numbered boxes at the top of your screen are tabs or steps. If there are tabs then ...


1

This is not a "feature", it's bad (or unfortunate) design, and there are two reasons for it, and one it technical: The height of either content in the modal or the content of the page is higher than the designer anticipated. The technical cost of setting a proper height of the modal was considered too high (and in unfortunate circumstances near ...


1

If it links to another page, why not use the standard link analogy? The convention is well known for users. Otherwise a small symbol next to the row title in Tohster's solution would also work. download bmml source – Wireframes created with Balsamiq Mockups


1

I came across an issue with meta programming in one early test I did. I was asking the following question: A form on a web page needs to have a way of clearing or submitting the data – traditionally this is handled with two buttons. One says ‘Cancel’ and the other says ‘Submit’. Of the two buttons, One is on the left and the other on the right. Which ...


1

I assume there are IMHO two possible tools to develop to make your users' life easier. Note that in both cases, it would probably make you work more with your users, to fit as close as possible to their needs. Develop a feature that would format those sensitive data while exported : this means that the report has to be modified, identifying each column to ...



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