Hot answers tagged interface
10
Is it even neccessary to show how many children are left to be approved at all?
How many administrators will be doing the approvals? If it is more than one then the task will probably be split up anyway (please correct me if I'm wrong) so instead of showing the progress bar you could do one of the following:
on approval of one listing ask the admin if ...
9
I agree with WebDevelopteer, having different categories of things in the same column is not very intuitive. But you can go a different way.
This is a (very) quick idea. How about having the verification icon first, and only once it's been clicked and verified it shows you the Primary selection as a different button?
The verification button would have two ...
9
If the client really wants a typed "signature", and you're interested in making it look like a printed document, how about something like this?
A highlighted signature box with a standard signature line and some instructional placeholder text.
On clicking, the user gets a flashing cursor, a button to commit the change, and a way to cancel out of the ...
8
You are at least making a dedicated effort to involve users at an early stage, which is great.
As for the skimming behaviour, eye tracking studies have shown that these typically follow the same pattern on the screen.
Jakob Nielsen has done a ton of research on it.
It strikes me however that there's a mismatch between your assumptions of what is "nothing ...
8
Create a clear visual hierarchy
52 weeks of UX
tuts plus
This basically breaks down into making the most important parts of the page the most obvious through various techniques such as size, colour, contrast, use of whitespace, proximity to other items, etc.
The most important parts of the page are usualy the headings, content and primary navigation (or ...
8
If your app is really just two screens of content, then you can try treating each screen as a pane in a horizontal carousel where you can swipe between them. Take a look at the iOS weather app as an example.
7
A quick search of the Adobe site shows the reasoning for this - albeit for CS5 but I would imagine the reasoning is still the same. (emphasis mine):
By default, the Photoshop History panel retains only the last 20 actions. This is a compromise, striking a balance between flexibility and performance. You can change the number of levels in the History ...
7
Your second mockup is spot-on. This system consists of 3 elements: record name (email), status switch/indicator, and an action (remove/edit). In addition the possible statuses (unverifified/verified/default) can be changed only progressively upward (i.e. no skipping or downgrading). Thus, there's absolutely no need to have a separate column for validation ...
7
The solution for this is called visual hierarchy.
It's damn hard to achieve.
My favourite example is found on the Thinking With Type website.
There are a few rules which help you to reach a visual hierarchy (Gestalt Principles, C.R.A.P. rules, etc), but in general, the person who understand this is called a graphics designer and the person who really ...
7
Showing the actions only on hover is the way that 37Signals do it in many of their products, and so far I haven't seen any problems with it, other than it not being usable on touch devices. That is a big downside if your customers are likely to be using touch devices. With the prevalence of iPads, this is becoming a bigger concern.
Another possible method ...
7
This answer is more or less a paraphrase of what I remember about what Jef Raskins says in The Humane Interface about KLM:
Say K is the time it take to hit a keystroke, P the time to put the cursor in some place of the screen, H the time to go from the keyboard to the mouse and vice versa, M the time for the user so she can prepare to the next action, R the ...
6
There is a jquery plugin called Masonry that:
Arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
And the same author built Isotope which is even better, with filtering and sorting options, check the ...
6
You could use the token-field design pattern for displaying and selecting the multiple options. This has the advantage of letting the user see all the items they have already selected while they select more, not just the options that match the current filter.
Some token-field implementations also implement the type-ahead filter design pattern you have.
...
6
You need to make a distinction between an action that causes a single event to happen, and an action which causes a state change.
Delete X is an event as it will happen once and X will not continually be deleted without the user selecting Delete again. Enable animation is a state change, as from that point on the animation will happen without the user being ...
6
It seems to me you are looking for the "wizard" ui pattern. Here is a link that has a lot more information explaining the purpose and reasoning behind the pattern: http://ui-patterns.com/patterns/Wizard
To give the user feedback on where they are in the wizard either text or graphics can be used. I think this is the particular piece you are referring to.
...
5
Part of the decision is the amount of memory used per undo. In a large, complex application such as Photoshop, there is a large amount of state that is restored in an Undo operation. In a web browser such as Chrome, on the other hand, the only state required is the address, and in some cases form data; this state is maintained anyway (browser history), so ...
5
I am not a big fan of greying out content since it gives the impression to users that a content cannot be edited or changed. I would recommend going with an approach where you allow users the flexiblity to select any email they want provided its already verified (refer to the mockup below). The last radio in this example is greyed out because the email is ...
5
I guess it depends on what you want to do with it, and how often you imagine it would be used.
Solution 1: Badges
One way would be to add a badge-like indicator to the sorting:
download bmml source – Wireframes created with Balsamiq Mockups
You will need to consider not only the display, but the actual interaction for manipulating it. How do ...
5
Leo, here's the way I approach it usually.
In the research phase you're talking about I collect a list of competitors and add their information to a notebook for the project in Evernote. Then I have a single area that allows me to have multiple screenshots, my own notes, and anything else that might pertain, quick design ideas etc.
I usually have a ...
5
It is certainly not directions, as we are not telling the user to turn left, head east etc.. Instructions I am not sure would be correct either, as you are not giving the user the commands or guidance, "type ls -h" for example...
Objective might be a better fit, because you are giving them a goal or objective, and they are to figure it out. Direction is a ...
5
You can categorize this under "menu bloat" ;)
Help is an expected menu entry and rather than adding another menu (or using the application's menu, as they should) a lot of apps have over-used this position. In their defense, it's a menu users turn to when they have questions. I assume IA's are simply trying to capture people browsing for app information.
...
5
The entire point of the shadow is to achieve a separating effect from the rest of the page's content. This is somewhat subjective, but the sharper and more aggressive the shadow the more it distracts me from the actual content, making it "worse". To get a "good" shadow I do the following:
I prefer a glow effect (light source is coming behind the person) to ...
4
At the UX Australia conference this year, there was a short case-study by the team that worked on the Australia Post iPhone app.
They experimented with three options for primary navigation; a classic Apple tabview, a Facebook-style table view that slid in from the left and a grid view as you've demonstrated here.
The team found that users preferred the ...
4
Any number of things could be done, my personal fav would be braking some of your rules but simply calculate the width of the screen at start up, and use some math count how many images can display:
if (TotalWidth - imageWidth1 - imageWidth2 - imageWidth3) <= 0 { 3 image center}
elseif (TotalWidth - imageWidth1 - imageWidth2) <=0 { display 2 image ...
4
The compelling arguments for making it white seem to be a) it looks like the printed version and b) other applications use a white background.
Yet your users require something easy on the eyes, and they do not print often.
So in this case, using a darker (black) background would seem to meet the users' needs, which is the goal of a well designed solution. ...
4
Maps are better looking; and in theory faster to use. But they offer poor accessibility; novice computer users may no realise that you can click on a map; and more people than you may think would have trouble selecting the area that they live in. When you think about it, most people rarely come into contact with the geographic boundaries of a place they ...
4
Consistency matters in UX, even when it is in things that most people will not be able to consciously notice.
I don't see any worthwhile advantage for this in any application. I've never heard a single person complain that in gmail the cursor isn't mirrored, and so I can't imagine that it is a problem for anyone.
Rather spend the time making other aspects ...
4
Designing and testing interfaces for touch-screen kiosks is my primary responsibility in my current role, so sorry if I get overly technical or too wordy (I could—and do—talk for hours about this stuff).
There are many, many differences between large format touch screens and mobile devices. My strongest recommendation is to not do any design at all until ...
4
If your goal is to show all the permutations of the options, then you may have to look at a diagram like what you have. However, I expect that is rarely the goal.
If it is simply to show people what options they can combine, I would do the following:
Most people will choose the most important feature to them first. So once someone has selected feature A, ...
4
I think, if its being done because the user needs to know the time of day when using the interface, then it could work nicely.
For example, someone who works remotely for a company in a different time zone, may appreciate the reminder that the rest of the company may be asleep (not the best example).
If its done just for the sake of it, then its probably ...
Only top voted, non community-wiki answers of a minimum length are eligible
