Tag Info

Hot answers tagged

42

Don't rely on shaking as the only way of selecting any common action. The exception is novelty apps like whips or throwing dice. For other apps it is poor UX as it: Is uncommon behaviour for many users, as most apps (sanely) don't use this action. Has poor discoverability as there is no cue on the screen letting you know how to use it. There may be an ...


35

We are really at the early days of touchscreen technology. While audio feedback and advances in haptic feedback could make this slightly more viable, I see touchscreens as an interim workaround on the journey towards gestural (+ audio) input. The mistake in this design shown in the video is (in my opinion) using a touchscreen at all - i.e. a 'touch ...


30

Yes, and it's called finger-friendly. Smaller touch targets are harder for users to hit than larger ones. When you’re designing mobile interfaces, it’s best to make your targets big so that they’re easy for users to tap. But exactly how big should you make them to give the best ease of use to the majority of your users? Many mobile developers have ...


21

Thought I'd throw my two penneth in as a former Automotive Interaction Designer for a large British car manufacturer in the premium and off-road/footballer market owned by an even larger Indian company. Starts with "Jag", ends with "...nd rover" Anyhow, for those of you familiar with those brands you'll know they use touchscreens. I'm not a fan. The NHSTA ...


19

This is a pretty broad question, but if you're looking for some resources, here are a few I would suggest: Apple iOS UI Design Dos & Don'ts Apple: Designing for iOS7 Android Design Guidelines Designing Mobile Interfaces by Steven Hoober and Eric Berkman Mobile Design Pattern Gallery: UI Patterns for Mobile Applications by Theresa Neil Microinteractons: ...


11

That's a tough problem. You could use a drag-from-the-edge to reveal a menu. I would make drag from the left edge to pull a menu "drawer" from the left. You could put some visual cue that this feature exist, something minimal like so: download bmml source – Wireframes created with Balsamiq Mockups or teach that this feature exists with no ...


11

The difference between touch and mouse is much deeper than just the size of the controls. It requires another way of thinking: • Swipe rather than scroll (which requires you to rethink the role of scrollbars) • Pinch rather than click to zoom. • Cursor remains invisible (because under your finger). This makes operations much more direct but also less ...


10

@Obelia has proposed good idea. I just want to show how cue could be implemented in unobtrusive way, so instructional modal window could be eliminated. The menu itself explains the feature with its behavior.


10

You could try to expand responsive zones of small draggable areas. Moving close toward those zones is clear indicator of user intentions. It brings smart behavior to your app and provide better usability, as target is increased and moving distance is decreased (Fitts's law in action). To indicate small zones more clearly, you could also use more brighter ...


9

The guidelines given for the various platforms are all based on the idea that the minimum size should be 9-12mm. The variation between the guidelines is mostly due to differing pixel densities on the devices, and hence different number of pixels needed to reach the 9-12mm figure. Note, that this isn't an ideal dimension to make the button easier to use, ...


8

Yes, size can be an issue. Touch targets need to be bigger than typical desktop targets because the finger precision is worse than the pointer+mouse precision. With this worst precision the odds to do missed taps is bigger (like not touching a button or touching the incorrect one). Usually, touch studies use as principal study variable the error rate. The ...


8

I definitely wouldn't do this; the pull down to refresh mentioned in John's answer is probably the most common gesture. Though if refreshing isn't automatic or is a common action for non-power users I'd personally recommend just sticking with a button; you have a pretty universal "refresh" icon at your disposal and refresh is quite often initiated from a ...


7

Instead of displaying the content in modal windows as you do on the desktop version of your website, you could consider displaying the content in slide-out panes or separate pages on your mobile (responsive) version. Add an easy to use slide up / slide down button large enough for a user to tap on with their finger. What type of information do you store in ...


6

They are useful during pure media consumption like viewing images, videos, etc. Regarding the issue of educating the user of their usage: the current standard implementation is quite good enough. Display the controls and additional data when opening the content and then remove them after a few seconds. This tells the user there is all the other information ...


6

One solution is to have an ordered list with different sized font sizes to represent weight/popularity. The row heights could even vary depending on popularity, down to a minimum height of course. See mock up below: EDIT: In combination with @JonW 's idea, I could even use popularity/page view meters to indicate their popularity, and even a figure beside ...


6

Not next to the Apply button for sure. Just a slight slide to the left and you clear your entire selection and have to redo it. I would rather place it next to the Close button. Since even if they misclick, the punishment is not that severe - you cleared selection instead of closing list or you closed list instead of clearing selection (hoping it is not a ...


6

I don't know of such a symbol, however, you could use an animation of a process to emphasize the duration required for the click. Example 1: a button that is shaped like a screw head that screws into place while you hold your finger down on it, until it is in place (and if you let go beforehand, it screws out by itself). Example 2: a lever that moves ...


6

Mobile Tuxedo has an interesting array of options for touch gesture icons, and their solution is to couple it with a timer icon (4th column in their matrix). If there's a specific duration of hold you require, or it changes by control, I think placing the minimum duration in seconds along with or in place of the timer would work.


6

Gestures that don't mimic real physical interaction are not easily learned. I would suggest you do not use a gesture for this but a button, icon, or text instead. Questions to ask before introducing a gesture: Am I adding value? Or is it a gimmick? Does this gesture make sense if it were manipulating the physical. How many seconds does this add to the ...


5

Shaking is a physical gesture. Apart from a physical gesture, there should be a primary digital counterpart too. Volume can be controlled by sliding the volume bar of clicking the volume buttons. Phone can be answered by swiping/moving the slider or clicking the handsfree button. Physical gestures can be thought of as short-cuts, it is fine if you have ...


5

Assuming that you really do want a tag-cloud or equivalent functionality (and I'm not sure that you really do) then the actual tag cloud isn't going to work on a touch device, no. The touch area is far too large to allow for such intricate operation unless you're using a stylus (and who uses those these days?) I suggest a different approach. ...


5

Hide the Yes/No buttons or replace them with a "loading..." indicator/graphic until the next question and image have fully loaded. This way the user will know that they can't answer the question yet because something is happening (i.e. loading the question and image). It can also act as a feedback mechanism. Once the Yes/No buttons "vanish" for a couple of ...


4

My friend built a similar project for our sales' "Green Room", displaying sales statistics, exported from the CRM system we make. Maybe you can use it as inspiration. Here are some pictures from our old blog. I could not get Google Translate to work here, but here's a short explanation: The six screens show six different graphs. A Kinect sensor sits on ...


4

The interaction for touch screen finger swipes is for the background to move with the finger. This applies to swipes that move content, such as scrolling down a page of text, or when pinching to zoom, where the page moves simultaneously with the fingers as they move apart or together, or when repositioning an element, when it appears to stick with the ...


4

There's such a gesture, I don't find it intuitive, but works quite well. Maybe someday it'll become a standard or something like this. The gesture is "double tap and drag". You double tap the screen and with the second tap you swipe up or down to zoom in or out. You can find it's usage in Google Maps on Android and iOS. Here's simple demo: ...


4

I'm not sure I'd realise it was possible to drop a colour onto the areas you highlighted, since the target is so small I think I would imagine that trying to drop anything there is futile. Have you considered having separate colour drop targets listed larger beside the graphic? As in provide a list of customisable sections (e.g. "Collar and cuffs", "Front ...


4

A full-screen icon floating in the bottom right or top right margin will do just fine. This is the place where 90% of all movie players have it too. And a lot of lightboxes mimic this. If you care for big well-known sites, Youtube has it on videos, and so does Facebook (images). It's generally a square with a small arrow in it, a bunch of corners, or maybe ...


4

I've seen the term finger-friendly used before, which is pretty succinct. An interface may be fine for a mouse and keyboard, but may not suit finger taps, slides, etc. Either create a dedicated interface for the purpose (such as a smartphone or tablet app) or adapt the one design to suit both use cases. There's also more to finger-friendly interfaces than ...


4

We developed some very early touch screen apps starting back in the 1970s and 1980s, and have learned a lot of lessons and developed our own set of guidelines over the years. (Please note that we did our work with full screen size terminals, long before the existence of handheld devices like tablets and phones.) First, we had to understand our users. ...


3

I cannot give you an example, and I have never implemented such thing, but I think it's pretty fine to have a tag cloud (even 3D one) on a touch screen. The whole idea behind tag cloud is that less popular tags (it does not depend on screen type) are smaller and thus: less visible harder to trigger (click or tap) In other words, both visibility and ...



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