Tag Info

Hot answers tagged

37

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


27

There's no 'right' answer here. What is more important is that you are consistent within your own documentation. Regarding touch interfaces, the typical interaction is 'tap'. Regarding desktops, the typical interaction is 'click'. In both cases, it's not the ONLY interaction, however, as both touch devices and desktops can be navigated in other ways ...


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


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


20

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


18

Your question seems to suppose that styluses (at least as the primary method of input) were once in favour. I don't necessarily agree that that's true. Styluses solve the problem of using an interface designed around precise targeting of elements (e.g. designed for use with a mouse) without requiring substantial changes to the interface itself. In this way, ...


15

I would say Apple has to do with it, but they're certainly not the only reason. Why use styluses in the first place? Remember the good ol' PDAs? UI-Design: You can instantly see why styluses were used with devices like these: You had no choice! How would somebody possibly touch the UI-elements on this screen with a finger? UI-Design was more ...


14

As you will be using Android, perhaps refer to their own Design Principles documentation? They use 'touch'; Access the entire collection of apps and widgets by touching the All Apps button at the center of the Favorites Tray. I would also say you 'touch the button' because isn't that exactly what you are doing on a touch screen device? That surely is ...


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.


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


8

To really answer your question, we need to consider why people need a stylus in the first place. 1. Stylus for resistive touchscreens (past -> present) You can't operate a resistive touchscreen with your finger, at least not like a capacity touchscreen. Resistive touchscreens pretty much need hard objects in order to work correctly, which means your ...


7

One idea would be to add an animated transition between the questions. Tapping an answer would slide the next question in view (or turn to new page?), and no touch events would be of course registered during the animation.


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


7

Click implies the pressing of a physical switch which then creates a 'click' sound - typically on devices with input devices attached (such as a mouse) Push implies moving something out of its original position, typical of a physical button, again similar to a mouse (or moreso key) input Press implies moving into physical contact with something, the ...


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

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

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

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

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


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

It's much faster and easier to use a finger than to have to pull out a stylus every time because not only do you have to pull the stylus out, you then have to use two hands to interact with the device if you're moving or don't have a surface to place your device on. Hands on the other hand (pun intended) let you operate your device with 1 hand (hold in ...


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

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.


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

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



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