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


29

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


24

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


16

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


13

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

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

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

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

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


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

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.


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


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

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


4

Interesting question. Rather than having a dead zone (safe zone) that does nothing, you should make your "safe area" trigger the label editing. If you do this, then tapping the tile will either trigger the navigation, or editing of the text box. This way there will be no sense that the tile is "broken", and the user can easily cancel out of editing the ...


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


3

Exhibit A - factory entertainment systems physical (often single-function) buttons monochrome/minimal displays shallow menus Exhibit B - more complex aftermarket systems greater visual emphasis deeply nested menus more functions My hunch is that manufacturers noticed people replacing A with B and decided to offer B by default.


3

In the current design there are some possible issues: bad visual feedback, as buttons are placed too far from the fields bad overview, as right-handed user will hide fields with hand while entering no feedback of current mode (Total, Paid, Remaining) . The possible solution which eliminates the issues is on the image:



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