Tag Info

Hot answers tagged

23

TLDR; A time based message (timestamp, declarative sentence, or both) in the pull to refresh tray assists user understanding of the age of data shown in the feed. New items available to pull can be indicated with a visual counter. Example: Tweetbot has executed their pull to refresh in a useful, informative way. The time based message is always shown as ...


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


12

Most commonly I have seen this done with a refresh timestamp, so you might see a message "Last updated 5 seconds ago" at the top of the item list, close to the place where new items would appear when available.


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

No, not necessarily. In the past, designers used heavily skeuomorphic patterns -- visual styles that strongly resembled physical, tangible objects in order to suggest how they can be interacted with. Physical buttons are often round or shaped to someone's finger because the user is physically touching them, and early digital designers wanted to make sure ...


5

Typically, apps like Twitter or Facebook use this kind of pull-to-refresh: ...but when there is no new data, it simply returns to normal, like you said. One possible solution is, after finding no new entries, change the "Loading..." to say "No new entries", then disappear after a short delay.


5

The big thing is that you don't want your user to reach a dead-end. How can you curl this microinteraction back around to another action? Is there is an action that the user could take to keep their feed updated more like following more topics, people, or questions? Give the user a proactive way to keep their stream updating instead of an error message that ...


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


4

An important factor to consider is the audience of the application (or website). It seems that typically, many younger audiences (or those familiar with touch devices) are used to swiping across carousels. If you look core applications of iOS (and I'm assuming Android as well), you'll find that carousels support swiping to switch to the next image. However, ...


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

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


3

I suppose the first point to make is that you shouldn't depend on invisible interactions to accomplish anything. The example made in virtualnobi's comment of iOS's swipe-to-delete gesture is a good example; Mail items etc. can be deleted the long way by choosing Edit, then checking the items you wish to delete, then choosing "Trash"/"Archive" at the bottom ...


3

Personally, I think these apps got it right—in context, the result of this operation (e.g. "move all the items on this screen up a bit") can be accomplished by a newbie through a series of separate individual operations ("move this item up, then this item up, then this item up"). It's not an operation that needs to be performed often, and it's suitably easy ...


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

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

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

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


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

Supporting the case for placing it on the right: Normally a user would read, or at least scan, the content before thinking about scrolling. In that scenario it would make more sense to have the scroll buttons on the right side (assuming of course that the content is being read left to right). The scroll bar position for vertical scrolling is on the right ...


2

Interesting is the general form of the question: Does a user understand how something is intended to be used because it's shape is an ergonomic match for a body part? Examples seat : Yes handle : Yes button : Historically may have been Yes, but currently No. Buttons have been culturally well understood for many generations which has let them evolve ...


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

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

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

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



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