New answers tagged

1

I think the way gmail handles swiping to delete is perfect: Three pieces of this interaction are key: 1. There's a clear indication that the user's swiping action means deleting. This is shown with the trash icon during the swiping motion. 2. There's clear feedback after the swipe that something was deleted. The deleted item is clearly marked with a "...


1

In a word, no. There is no consensus on swipe actions in apps. To illustrate the lack of consensus, here's a quick list of some applications of swipe actions: (When I say "swipe right", I mean swiping from left to right.) Google Android notifications: both left and right for dismissing Android recents: both left and right for dismissing Android wear: ...


1

Google has something that might help you a lot. You can find the default and accepted general swipe gestures on mobile applications on the following link: Gestures Patterns by Google Users are really familiar with this kind of gestures and their actions.


0

I agree with Splatz that gestures have no affordance, unless gestures that are widely accepted already by the general public. Companies such as Apple has created some standards and have advertised those standards to customers. So I think you can safely use those well-recognized gestures, but not on core functions and definitely try not be creative on this. ...


2

Unfortunately, mobile Web browsers will not render pdf inside an iframe. The pdf mime type is handled by most Web browsers as a file to be downloaded. The only way you could make it work is to convert the PDF to an image format before hand so that it can be displayed inside one of your iframes. The mobile constraint makes it difficult to show both at the ...


6

1. Use an existing convention Typically, the 'more' is represented by 3 stacked lines or 'hamburger' as designers call it... Sometimes, a set of 3 dots, horizontally- or vertically- aligned represents this, 2. Create a hybrid You can create some unique variation of this icon by combining your business brand with this universal web design symbol! 3. Do ...


2

The more menu on a bottom navigation menu is actually a rather common navigation pattern. Yelp, Yahoo fantasy football, Band are a few apps just on my phone that use this navigation paradigm. There are pros and cons to any navigation approach, the main con of a bottom navigation bar being that it uses more screen real estate than say your typical off ...


2

You could introduce some way to set a specific priority (an icon, double clicking the existing priority column, etc). If I need to move from 345 to 13, I double click the 345 and type 13, hit enter and that row zips up to position 13 (former 13->14, 14->15, etc). I would likely combine multiple solutions. Click and Type is good for setting a specific ...


0

Drag and drop is more convenient and can move multiple rows Many arrange 10-20k is a lot of manual


2

All the gestures are hidden from the user until they either are taught them or accidentally discover them. Gestures have no affordance. Obviously it does not help if app developers don't follow platform conventions. Onboarding techniques and TV advertising (I am thinking Apple here) can help with education. From a design perspective gestures should only be ...


1

As was pointed out in a comment, I would revisit the idea of using a multiline text field instead. I'm sure you can find a way to watch for changes -- for example, on Android, there's a TextWatcher class you can use. Another option is to make the field look like a text field, but open up a dialog when it is clicked. If you still opt for an edit button, ...


0

I would have it break under the text area unless there are other form items that may be edited in this fashion. In which case having it flow in line like that is great. If this is a standalone text area then break it to the next line.


1

Assuming I'm understanding the situation correctly, I will propose a few options 1) the best interface, is NO interface.. by detecting the browsers user-agent, you can determine what type of system they are on (and POSSIBLY skip one of the tab bar selections). I understand that you may not be able to do this in ALL cases. It will be VERY rare that someone ...


-1

The best option is to show up the action bar dynamically, specifically for every row like Blogger does, instead statically tying actions to unrelated columns. The Blogger gives you a list of posts. It displays an action bar under every post row whenever you hover your mouse over the table. This saves space (well, I remarked that Blogger reserves the ...


0

This might not apply to your case but... Depending on the complexity of the form, I'd suggest maintaining a fixed bar (top/bottom but visible) with the possibility of navigating directly to the desired step whenever needed. Please note that for this approach to be user friendly, the user shouldn't see this as 'jumping back a step' but more 'alternating ...


0

I am a left handed user and when I have a good single-handed grip around the screen I find it difficult to reach the back button in the title bar. Therefore Apple invented the edge-swiped back to resolve my problem. I don't believe Apple will use this technique to move elements on the screen; iOS depends on spatial features to help users orientate ...


0

Toggles will always be confusing, as explained by others: http://ux.stackexchange.com/a/1321/84675 http://stackoverflow.com/a/2721066 As the learning curve is small, the best thing to do is make a consistent choice that works for the visual hierachy of your UI: All icons represent the current state All icons represent the action on click


0

Not suitable for every app, but here's a suggestion:


2

Apple does this in several places. Perhaps they're focused on making actions easily reversible everywhere. It doesn't seem like language selection is an exception.


3

Presumably it is emphasised as - if the entire interface is converted to French and you can't read any French - then it is impossible to reverse the action !


1

I think you are talking about the carats. Jquery's UI library has defined line of code for every particular icon. But try not to use these on the headers. As for the headers the UI looks intuitive when we use icons like hamburger, kebab etc. Carats are for the in page navigation only.


4

Density-independent Pixels Sounds like what you're looking for is Density-independent Pixels. Even though you might be working in @2x sizes, the final result is the same. The code will remain Font-size: 24px; on desktop and mobile. The higher density screens require specific solutions for visual elements such as images and icons, but not for the basic ...


1

To answer your question: Short answer - No. Longer answer - No, but would it help development if you provided more guidance? Not only will it probably help the team if you define some basic stylistic ground rules (do you even have a style guide?), and it will give you a sense of scale about how it looks and how it works. As a designer you need to have a ...


0

I try to follow a strict pattern using only pixels, percentages or em's, but it aways gets messy, so we end up using a mix of them. But thats not a big problem. So just go do your work.


0

I worked on a project for a fire services internal website, and it was interesting because their brand colours were red, and wanted to use it for their primary action. I wondered whether this was a good idea because it creates the impression of urgency and diverts attention unnecessarily. However, thinking about it further, I guess you could look at such a ...


9

I hope this answer this question, but this is my personal process: I use the font sizes in my PSD mockups for reference purposes only, almost as a 'relative' size. Then after Design is approved, along with the assets, I create a separate html / CSS basic file as a style guide (a bit like a style tile) where I define the real size for all fonts and see how ...


1

A few years ago I heard a talk by Cory Lebson, who has written about UX in disaster scenarios. Two of his articles are here: The Critical Importance of Web Usability in Disasters Lessons from Disaster Research


1

Human Error - James Reason Detailed description on how people 'process information' - and how this causes them to make mistakes. This is the book to read. I was going to mention Yerkes Dodson - but I see its in the paper you reference. "State Dependent Memory" is also worth looking up. And any number of articles on the interface design in nuclear ...


0

I think the answer here has to be a very firm "it depends". It sounds to me like you need a few different things: A means to see an individual object that you're currently looking at, and clearly see both the common properties and the specific properties for that type of object. A means to see where that object is connected to other objects, and the ...


1

I have built several UI screens like this in the past, with a table summarizing some info, but additional details and/or editable settings per row. My preferred approach is to keep the table read only, but allow the user to click/highlight a whole row at a time. Clicking this row can then populate a nearby "Details" section with all the detailed info and ...


1

I clicked around with that radial slider in the link you provided and can tell you that I much prefer more standard methods of input (numerical input, horizontal sliders/range selectors, etc.). Why? Because a number range doesn't conceptually end where it begins as the radial slider shows. Furthermore, it tends to be a bit unclear how to update the range ...


2

Any interaction is only useful if the target users understand it. I'd suggest making a quick and dirty prototype that just has the radial slider and asking users to input various values and see how they get on. You should also test inputting the same values using two sliders, two text fields with number pads, and any other methods you can think of that ...


0

Tags are the first thing that spring to mind. Consider the StackExchange's own various subsite tags (for example you've tagged this as GUI Design, Browser and Relations related) This lets you stamp whatever area you're in with the tags that relate to it, and allow people to navigate to other places with those same tags by clicking on them, as well as ...


1

Maybe a tabular data table is not best way to display this information? Perhaps consider using the card UI metaphor where you can dedicate more space to data and their labels: Note: depending on the data, some information does not need a label because the data describes their purpose.


0

There are some excellent answers here, with some great human factors links. Just because Apple has decided to create a patent doesn't automatically mean it is something that will actually be useful. There is a limit to how much the phone can know about how it is being held and how someone can interact with it. I suspect you will need a number of new ...


2

I agree with other answers/comments that indicate that you'll want to keep with the consistency/theme of the OS, however I'm going to add some "food for thought". The trend of "modern" flat icons is good from the standpoint of simplicity however I feel that sometimes we throw away some usability factors like discoverability just to get a flat look. I ...


8

When you are choosing icons, they should be the same style with the rest of the interface. If your interface is glossy, use glossy icons. If its flat design use flat icons. The important thing is not to mix them. For example, if your interface has 3D shapes or elements, don't use 2D icons, because they contradict the look and feel. Also, the primary use of ...


0

The Shopify backend comes to mind. On the left you have the main navigation. Every directory has a sub directory. When a sub directory is selected (like in the image) the main directory folds in. This will keep the main directory still visible and accessible.


1

Unless there is some internal requirement to use one system or another for bankers and traders, the fact that they are bankers and traders shouldn't be a consideration. They are people, and so the issue is more what's best for people. For navigation, ease of scanning and recognition should be your focus, more so than in most other forms of text. So, you ...


0

Resorting to the placeholders depends on whether or not the service will be functional with only a percentage of the choices properly chosen. If not, then the user has to select an option regardless and therefore the placeholder looses any importance.


0

In the end I went with a hybrid approach of this input field, and links behind the error messages. The two common actions one might want to take when something invalid is entered, is editing that part, or deleting that part. The links, (Select | Delete), would either select the part of the sequence that was wrong, or delete it outright. This allows the user ...


1

Michael, I was think the same for right/left hand user, please correct me if i am wrong flipping the entire interface to the other side Should not flip the entire interface because for understanding / reading the information/content we do not required either right/left hand, rather the languages which required to read from right to left, required vision (...


4

The initial assumption is wrong: Regardless of their dominant hand, people seem to use their phone in their non-dominant hand as well, and vice-versa. An old question on Quora gives some insights on this: https://www.quora.com/Which-hand-do-you-hold-your-iPhone-in-when-using-it-one-handed There is no clear winner: dominant holds vary In addition, we hold ...


1

You bring up a very valid point and one that reflects some of the annoyance from owners of larger smartphone devices. I know people who have downsized their phone specifically for this reason. My suggestion would be to keep action buttons - ones that require touch feedback from the user - toward the bottom of the screen. This requires far less dexterity ...


3

Please don't flip anything away from where a user planned to touch a second ago.. If a user sees the settings ≡ icon on the right top while holding the phone in their right hand and cannot reach it with right thumb, they might as well move the phone to the left hand and reach for the icon with their right-hand index finger. So it shouldn't suddenly move to ...


2

For the initial state, I would go with your suggestion to have placeholders like -Suit- and -Number-. This shows the user exactly what it is supposed to: the appropriate informational labels for the comboboxes and that a selection needs to be made. On a side note, I thought it would be cool to have this design: This would be the initial state. The ...


2

I completely agree the content should not shift. I would put a message showing the "staleness" of the data, e.g. "Last scanned 10 minutes ago" or "Last scanned on 6/27 at 9:30" This gives the user the context they need to decide whether or not they want to trigger a manual re-scan (or helps explain why something they are looking for isn't shown- it is ...


0

1 - Depends on your use case. If it's likely that a user will just want to see the page without making changes, then I'd prefer to minimize the chances that the page will go live by mistake: I'd make the users request the internal page explicitly by navigating to Edit mode. But if that's not a likely scenario and in most cases users will only want the page ...


6

Switching from 4 inches to 4.7 inches and then to a 5.7 inches phone, the major difference I have observed is the Travel. Even after getting used to, a person with an average size of the palm will still struggle to reach out to parts of the screen which are beyond reach. This might require several readjustments of the hand's grip to the phone to reach out ...


0

I think to consider simply mirroring the UI will produce equally usable results might be not true, as we will use the UI better with our more dominant hand. Given that most people in the world are right handed, more consideration should be taken when designing the ui to be easier to use in the less dominant left hand.



Top 50 recent answers are included