Tag Info

Hot answers tagged

23

There are too many issues with overlaying two different dragable items on the same control. For one - if you want both values to be the same then it's going to be hard to see that there are two indicators, or if you then want to adjust one of them it's difficult to make sure you're grabbing the correct item. If there are only two drag points, then why not ...


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


6

In order to answer this question you should conduct eye tracking studies. However, Google kind of has an answer already by describing a 'meaningful transition' in their design guidelines, especially 'hierarchical-timing' (see link below). http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing They ...


5

Try using a modified version of the first one, perhaps like so: What this essentially is is the first one, but with a box above to give an elegant preview of what you are currently pointing at. It will be above the user's fingers, and therefore out of their way. The reason I chose the first slider is because it has a bar, which is definitely the best way ...


5

ACM Digital Library (dl.acm.org) is really helpful when doing focused literature review. For more general research you can access Google Scholar search engine. I also recommend a great tool called Mendeley, that keeps track of your research and uploads all your material to the cloud (also generates the citations...) There are a number of papers on ...


4

You haven't gotten a satisfying answer because there is no satisfying answer. You are trying to make an application built with desktops in mind work well on a touch screen without changing your basic design, which is not possible. On a desktop, you have multiple ways to trigger actions on something (click and mouse over), while on a touch screen you ...


4

"Click here" or related "Action here" have become a bad practice for navigation. In case you want to use a text, I would be better just to specify the action (continue, buy, finish, next, etc). If for some reason you HAVE to describe a "mechanical action", tap / touch are the options. I don't have scientific support for this but here some reasons from: ...


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

Observations The difference in performance between touch keyboards and mechanical keyboards is clear and well studied. This paper shows that mechanical keyboards not only perform measurably better in speed and accuracy... ...but are also perceived better by users: Even pressure sensitive keyboards (with slightly more mechanical feel than touchscreens) ...


4

Scrolling pattern and navigation largely depends on the information architecture and content strategy of your website. The page scroll UI pattern has been largely used to showcase features of a product and I think it has been misused in this way. In most cases, the features are not peers but are related/dependent on each other. It seems page section ...


3

It doesn't matter much (because you're animating). Perhaps it is important to mention that as you use animation for the buttons, visual cognition has it that the effect of their position is likely to be minute. This is due to the fact that motion (animation) is the most effective way to draw people's attention - it is very hard for the brain to ignore. You ...


3

Show a one-time tutorial that explains such features, and provide an option to have it re-displayed if the user wishes. You may want to make it interactive, e.g. have this for one of its screens: download bmml source – Wireframes created with Balsamiq Mockups After swiping away, the tutorial ends (or goes to another screen, if you have more ...


3

Adding a tap would require extra efforts from the user. Why make user to take such steps. Scrolling is synonymous to exploring without causing the pain. Plus when I look at other Ecommerce apps, scroll is used almost everywhere. Have a look at some of these Images:


3

It is never really safe to assume anything along these lines. No not all touch devices in the past 5 years will have gyroscopic technology (the feature that registers tilt). I have had quite a few lower end cell phones with touch input but no gyroscope (or other related features like accelerometer). Even if the device did have a gyroscope maybe it will be ...


3

I don't think you can rely on it and should always check if the hardware is present. My best estimate would be that this is, in most cases, true, albeit the devices that are "smart" and powerful enough to run said application. That being said, have you considered the usability part of such an idea, like, how can they discover this gesture? Will they have to ...


2

Based on a quick Google search, the major players are still using the word "scroll" in conjunction with touch screens. Apple - "navigating your Mac using your fingers to tap, scroll, pinch and swipe feels perfectly natural." Microsoft - "How to do it: swipe your finger across the screen. What it does: scrolls through what's on the screen." And so on. I ...


2

The reason is quite simply (contrary to your experience) that it's proven easier to reach the bottom left corner if you hold the device with your right hand rather than the bottom right corner.


2

I do not comprehend why zooming is suppressed. The whole purpose of zooming is to read what is on the site. If our eyes cannot read small print we need to zoom to prevent severe eyestrain. If it is suppressed to make sure we see the ads - keep in mind that we will not bother using the site at all if the print is too small. Also, why are so many people ...


2

Add a selection outline with the height of the slider like this: Since the item will never exceed the height of the slider, it should work.


2

When I design for Android, I don't use in-app back buttons. Android users should be accustomed to the platform's built in back button, so including a back button is redundant, and, as you mention, potentially confusing. As for accidental presses of those buttons, is that documented or anecdotal? This is the first I've heard of it.


2

So here is what we designed simply suggest there is something more by adding partially visible trash bin. want to see more? Well, move the row. it will reveal the trash, and maybe some slighty visible text (e.g. "slide to remove") once you went all the way to the left, it will show on undo button/link for a few seconds Pros It has a simple regression ...


2

I'm not sure it is a standard per-se, but it is certainly very common. It's commonly known as "auto correct" but is really just a form of error correction algorithm. To illustrate the extent of what's happening, there are keyboards that take this much farther than merely looking at what keys you're pressing, and actually allow you to draw words: ...


2

Designers have to deal both with the end user and the business and sometimes little annoyances like this make their way in to the market because, "shipping is a feature" There are many smartphone manufacturers and I assure you some of them do exactly what you describe and then some. For example, Android Lollipop has a baked in feature where your phone can ...


2

I solved a similar requirement by providing multiple sliders and linking them together, so that they "validate" against each other (UI to configure shifts - which ultimately comes down to start times). Right pictures indicate boundary conditions (min and max, so to speak): Shift 1: --|--------------------- 02:00 |----------- ---------|-- Shift 2: ...


1

You can reference Apple design guidelines: Avoid lengthening alert text with descriptions of which button to tap. Ideally, the combination of unambiguous alert text and logical button labels gives people enough information to understand the situation and their choices. If you must provide detailed guidance, follow these guidelines: Be sure to use ...


1

Well it all depends upon UX designer's call. In my opinion if page has only input field(s) then keypad should open automatically as it's oblivious that user will fill information now. So in order to minimize the number of taps on any UI, keypad should open automatically as the screen loads. You can see this working on various online mobile recharge apps. ...


1

1. Make the buttons tactile Tactile buttons do nothing when your finger rests on top of them and require physical force to click them. All external buttons on Apple devices are tactile with the exception of the touch id fingerprint reader which has very few negative consequences from accidental touch. Some Android devices use tactile buttons as well so ...


1

I've seen apps include an affordance for sliding UI by using animations. When the page loads, some or all of the slideable elements move off-screen, maybe by 10% of the screen width, revealing underneath an indication of the action that sliding will achieve, before snapping back into place. If it is subtle and quick, it should not be too annoying that it ...


1

Here is the closest thing I could find to Windows desktop app UI guidelines for touch interfaces: https://msdn.microsoft.com/library/windows/desktop/dn742468.aspx From the top of the document: Fortunately, if your app is already well designed, providing a great touch experience is easy to do. For this purpose, a well-designed program: Ensures ...



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