New answers tagged user-interaction
0
Here are some exciting resources:
Kuler
It is most popular tool on the web. Its also gives you the photoshop
plugin.
http://colorschemedesigner.com/
If you don't know the science behind colors don't worry this will help you.
http://color.hailpixel.com/
It is very interesting tool which helps you to select random colors with fun.
...
0
Unfortunately no study on this (would be interested though if somebody has one) but experience from an app I worked on.
In this app the user can upload a .csv file to basically start a batch task. Before there was a written explanation on how the file should be structured. The change was to provide an example file for download so that users could learn how ...
0
I'll propose to use colorbrewer tool, which has solid scientific background. Also there are a number of color tools.
Satisfying your UX requirements,
let users select colours without understanding how HSL etc work
use pre-defined colors set
let users distinguish between light and dark versions of common colours
choose appropriate color ...
2
When wondering if something is globally understood, my first instinct is to look to interfaces that people are used to, globally, e.g. Windows. There, they do use arrows, but intriguingly enough they aren't placed next to items (where they draw too much attention to themselves and you might not know which row they represent) but above them. See the "Startup ...
1
Two answers:
1 Arrow heads (triangles) mean sorting when they are set inside column headers. When set at the left of a list mean display or hide sub-items. In multimedia controls then mean "play" or "fast forward". It's a common idiom.
2 Different users might have different preferences for the arrows looks.
Like for example corporate colors, or general ...
1
three lines with increasing or decreasing length -> can you show me an example? I don't remember seeing that pattern. – John Assymptoth
This is it:
But it is interesting how this pattern is perceived in right-to-left reading countries?
1
I'm trying to figure out, if my developer tool, should assume everyone will want an arrow, or if this should be configurable.
If you're allowing for taste, you should keep it configurable. Arrows are used very often, but sometimes you see three lines with increasing or decreasing length to symbolize sort order.
Since you're building a web-app, leave ...
2
Arrows are not intuitive but discoverable (a down arrow may be confusing - see comments to Igor-G's answer). If sorting takes only a wink, the user can find out the order suiting her best in only two clicks.
You can also try (for alphabetic languages, at least) the intuitive A->Z vs. Z->A,
and, mostly universally, 0->9 vs. 9->0.
1
UI patterns suggests that the arrows are established conventions:
Each column headline/label is a link. When the label is clicked, the rows in the table are ordered ascending by the specific column’s values. If the same label is clicked again, the order is reversed: the rows in the table are now ordered descending by the specific column’s values.
...
1
I'd suggest Using one of Google's design Principles which goes like
Decide for me but let me have the final say
Take your best guess and act rather than asking first. Too many
choices and decisions make
people unhappy. Just in case you get it wrong, allow for 'undo'.
Google has implemented this in both of its Android and iOS Gmail app. When ...
0
This will obviously depends on the system you are currently developing. But based on the normal user perceptions, Yes button should be green and No button should be Red or Neutral.
The Delete button should be of Red Color as it should warn the user before deleting and the Cancel button should be Neutral.
0
This is very much depending on the design ecosystem you're working with within the brand. However, I would suggest the following:
Upon clicking on the Delete button, triggering the action, a confirmation shows up "Are you sure you would like to delete {item name}?" This confirms that you have triggered the delete action and that you are about to delete ...
0
You could also just tell the User. If you have a Text leading to this table or just above the table, just tell the User he can sort the table by clicking the headers.
9
Is your problem mainly about saving horizontal space due to the large number of columns? If so, putting the arrows above/below the header may help:
Additional Node: A further way to reduce space is to only include arrows above the header of each sortable column. When you click the header of an unsorted column, it sorts it in the default direction. ...
13
If you cannot use arrows or a separate drop-down menu for sorting, the simplest thing you can do is, make the labels clickable. Make the labels look like hyperlinks. And when the user clicks the label, they can 'discover' that it does sorting. It is bad usability in terms of understanding the functionality, but, you can atleast give them the visual cue to ...
19
You could try a contextual arrow when mouseover.
It would be less self explanatory than if you had space, but it might be helpful in this context.
edit :
Google drive's spreadsheet uses that
17
Most users with basic web app experience will most likely still try to sort your table by clicking the individual headers. But for the more novice users I would suggest adding an adjacent control similar to that of sites showing sortable content which isn't ordered in a table, eg. similar to that of amazon.com.
5
Underline the column header, that will allow users to see that the header is a link(they can interact with it) and add title="Sort by price" so when the user hovers over the link it will give them the explanation what will happen if they click on it.
1
Well, definitely not at startup unless the updates are really quick to perform. The computers at our school update at startup and it's a nightmare. Sometimes a PC takes half an hour to boot for this reason (Even if you just wanted to do a quick web search...).
Also, letting your users manually choose wether to update or not in a dialog is not a really good ...
1
Ok, based on what I understand of the problem now, I'd consider something like this:
download bmml source – Wireframes created with Balsamiq Mockups
This would be the design per cell in your planning grid. The idea is to show the employees working that day directly in the cell, and you can add new employees to the list from a little popup that ...
1
There are few different ways you could takle this problem:
Drag and drop (drag the employee to the day you want them to work)
In Days boxes have drop-down with employee names
Select an employee and then click on all days/slots that you want them to work so you dont have to select the employee multiple times
Select the days/slots and then select an employee ...
1
One technique that has been used on the PS3 and some Smart Phones is to schedule a time when the computer will most likely not be in use. For example the user could set the time of 2:00 AM to update when updates are available. At 2:00 AM if the computer is for some reason in use it would prompt the user if they want to update right now or delay until the ...
1
The alternative is to do it in the background while their working,
however the used CPU percentage will be perceived as 'System Slowness'
and generate calls to the helpdesk.
At least OS X and Linux do perform many updates while the system is running. Don't know about Windows.
The reason systems wait for startup and shutdown isn't because of ...
1
There is some research that has gone down in this field. One is the Rethinking the progress bar, where researchers found that halts in the process; where the user couldn't see that anything was happening, was detrimental for the perceived time of process. Even though two processes took the same amount of time, the one that displayed more feedback of what was ...
0
You should move your Cancel button to the bottom left corner of the window, for the following reasons:
If you have a different number of buttons, the safe action (Cancel) will move around in your second example. This is best fixed by aligning Cancel to the left and actions to the right.
Your buttons are very close together, increasing the chance of ...
1
You can step further in visualizing primary action to minimize possible user error, see picture from eBay.
1
It seems your experience is to guide a user through a process or encourage them to follow through, so I would go with your second iteration, because in theory, it is moving them 'forward' or to the 'next page'. You are ending the dialog/box with an an action that you want the user to take.
See Nielsen Norman Group article
4
Why not place an edit tab at the bottom and then display the edit/delete buttons when it expands up? Users will be entering their code from the top and this tab will not interfere with the content since it will always be on the same line as the next line of code. The bottom line of the visible area will always be blank since the content will shift up...
...
0
After considering this further I've realized that I'm actually overcomplicating things greatly by trying to find a single solution that works in both apps. They serve very different purposes, and there's no reason to treat the same. More importantly, the differences between the two apps are the details that make it easier to answer this question, so trying ...
1
As you're considering this, also make sure that you clearly state that this will not be used or sold in any way and that you're only using this for informational purposes. A big part of asking for this information is that your users have to trust you. If you give any indication that you're going to break that trust, not only will that keep them from filling ...
0
The way you ask is almost as important as how and when you ask.
If you're dealing with donors, try to appeal to the same cause that brought them there to donate. For example, if I'm collecting donations for the Humane Society, I would have a message similar to:
Help animals closer to home!
We are working to get your donated funds in to the ...
6
You can use gamification elements to engage users into filling their profiles. One of the examples is engaging users to complete LinkedIn profile:
Some gamification tricks for user motivation are:
Make form filling meaningful for donors. You could explain why it is so important to fill the form.
Provide some kind of PBL (Points-Badges-Leaderboard) as ...
11
Usually the option in capitals is the default. The default will be used if Enter is pressed.
0
Consider the scenario where the user has the settings page open and another page in another tab, specifically in order to change a setting then go to the other page to see how the setting change effects it. The user might want to go back to the settings to readjust something or undo the setting just set.
If this scenario or one like it is foreseeable in ...
0
First, you definitely should give feedback on successful change, or error in settings, or server error.
After successful change you could redirect user to previous step, i.e. to page from which the user asked to change his settings.
4
Redirecting the user on the home page is confusing as he didn't ask for it when validating.
The most expected behavior is to let him on the setting page, with a success message ('your settings have been updated') and maybe an option to revert the modifications.
The thing to consider here is that the user will have to check if his new settings are correct ...
7
In your situation, a user will just copy the full model name from the printer properties dialog in Windows, to the search input field. So if it doesn't match, the user won't try to remove the model name and search again. Also, it might not be clear to him what exactly he should type into the search field.
I think it would be better to make a separate field ...
0
The content/purpose of the app can help determine the best course of action if you're looking for a custom loading action.
For most apps, the rotating gif works because it is standard and most users have an understanding of its meaning. Placement of branding/logo is also common during loading.
Also, giving the user a detailed breakdown of the events that ...
0
Well, basically the problem is that even when the app is showing the user that it's doing something (e.g. spinner rolling) the user doesn't trust the app to know that. For good reason, too.
So you need to rebuild that trust. You need to convince the user that something really is happening. Most efficient way to do it would be to show what the app is doing, ...
0
The best way I can think of is just put a little popup near the cursor with the Message "Hold and drag for scrolling" or something like that.
So something like this: http://www.hscripts.com/tutorials/html/tooltip.php
You can then specify to hide the tooltip on hold.
I think this is the most simple way. It does not have to be difficult.
1
I agree that most answers here apply only to draggable elements. In those cases there are clear conventions for giving such elements affordance. In the situation where the whole canvas can be explored by dragging, the only real convention I know is the hand cursor.
I think the following points are important to keep in mind if you choose to pursue this ...
0
Google Drive uses a similar pattern. The drawback is that users might start to ignore the bar completely or not even think to look there. I've noticed that users first look for action button close to the item to be acted upon. It took a several times before I could explain to some users that they had to look in that top bar if they needed to do X,Y, or Z.
0
You should change the width of the scrollbar on mouseover; that helps a lot to get noticed by the user. Next, you must change the mouse icon that you yourself suggested. It's a good way. Anything extra will be overload. I am attaching how facebook chat show that its draggable and then increasing the width to get the user attension
1
I mean besides the usual "rotating icon".
For tasks that consume a little amount of time, the rotating icon is the best, because users already know about it.
You can chose to show more details if the task is taking too long like "This is taking longer than expected"
Gmail does a good job of it, by showing a notification.( example - ...
1
I've only undertaken the CXA course but need to take the CUA exam in order to take the CXA exam which is frustrating.
The one thing I wish I knew is who the course is aimed at. Personally, I find the CXA course very outdated and antiquated. Examples, genuinely from 1992 or earlier. Amazon was barely born. And the slides have not been updated. Of the (6 I ...
9
Yes.
Not because I think it's a big problem (I know other think it's bad though),
but because I often pick up my phone and find it unintentionally shaken.
The Google+ app brings up the bug-report form when shaken, and standard iOS behavior is to "undo". When I pick up my phone and find the messages "send bug?" or "really undo?" and I always think: "Oh, ...
0
Some parts of interactive design is also about discovery. You shouldn't have to explain, indicate or notice about all that is possible. Not even have to be intuitive per se. Life is also about discovery! When you have users who are familiar with the interaction style you created, they will find it out themselves. Other users will find out by accident. It's ...
16
Common patterns to indicate draggability:
Drag handles
This goes towards affordance. Users need to be able to recognize something can be dragged just by looking at it. A "grippy surface" is a common metaphor for this.
Cursor
A grab-hand makes sense as well as the arrows (move) cursor. Currently grab is Webkit-only. Also note that some devices don't have a ...
0
Whatever you try to do, try to avoid using a solution such as http://blacknegative.com/. It a kop out (in my opinion). If you have to tell users how to use a website you're overcomplicating an issue. So the whole area is draggable? The below answer comes from just some creative ideas and nothing more - I think you have received some good ideas above and they ...
6
I mean besides the usual "rotating icon" or stuff like that.
Don't rule out the 'usual stuff'. They tend to be a fairly standard way to go about things. Users are familiar with the concept already and that can be a good thing.
Granted, even they can be an indication of something is 'stuck' (see the spinning beach ball of death on OSX, for example) so, ...
Top 50 recent answers are included
