Tag Info

New answers tagged

0

You might find this article helpfull http://www.nngroup.com/articles/form-design-placeholders/ Basically, it says that it is better to use the placeholder text as a hint to the label (not an example), but it is better to avoid placeholder text altogether.


2

The more cruft you can cut, the more efficient you can be in conveying your message.


0

I would suggest showing the remaining time to the right of the title if it is something that needs to be shown. If most people finish their action of reserving hardware in time then maybe it isn't even required to show at all until there is only 5 minutes left or something. (this would need to be usability tested)


1

Just to add to the other answers, you should actually avoid making the mocks look finished until the functionality is also finished. To quote Joel Spolsky: If you show a nonprogrammer a screen which has a user interface which is 100% beautiful, they will think the program is almost done. (source) To this, I would add that even people who aren't ...


6

No, it's not always necessary. System-defined screens are not obligatory, and there is no need to reproduce clone pages/elements with minor changes. Alternatives to hi-fi prototypes are lo-fi wireframes, user journey maps, PRDs. Yes, paper sketches/prototypes are legitimate prototypes if they are detailed enough and capture/highlight on all important parts. ...


2

You're right that one practice might not suit every single company. What's more, it might even differ from dev to dev. The simplest way you can go is just ask the devs what's their preferred way of working. Some people hate having someone else looking at their screens, while others may have lots of questions and would rather have you around. It varies from ...


2

What a great question, Niklas. I'm a huge fan of minimalism so I took a chance to write an elaborate answer. First, I beg to differ: the art movement and the design style are not the same thing. “Minimalism” as an eponymous art movement has formed in 60s, after the WWII, taking it’s roots in various precessing art movements such as Constructivism, ...


2

Advantages - Minimalist Web Designs Have Faster Download Speeds Easy Maintenance People Do Not Like Pop-Ups Helps the Focus on Content Convert Better White Space Helps Your Website “Breathe” Easier Navigation Fewer Server Resources Less Maintenance Easier Responsive Web Design


2

In my career path I ran into a few people who didn't really understand values of UX or UX practices. My answer would be they all are individuals and their reasons are individual, too, so in my cases I addressed each case separately. As for the A/B testing, as any specialised tool, it has lot's of limitations. I would take the data gotten from it with ...


0

Let's reverse the question. How would a colleague be able to convince YOU that your ideas are not good and that time shouldn't be spent mocking up your ideas? What evidence would you need? Their opinion obviously would not convince you to say. "Yeah. You're right. What a silly idea." I would gather that articles and books by recognized authorities would be ...


1

You could show the user what you currently have their address down as: (Not exactly how your page should look, but an illustration of the point) If users are confused by the example text, then do not use it. If they are concerned that you have the wrong address down, then display what you currently have down for the user on the page. Try to make use of ...


1

Nothing wrong with it as such. It is a little bit non-standard to have a vertical bar like that, a bit of a break in standard functionality consistency, but nothing to cause anyone who thinks about it for a few seconds any trouble. There could be a slight problem in using a 'loading bar' when it actually means the opposite of loading- when it is full the ...


5

I think the Arrow symbol is pretty universal, even without spears or perspective. Easy task: Specify a certain point / direction with colour on a wall. If you just paint a Dot it is hardly visible. A line may provide direction, but is ambiguous as it points in two directions. The best way to explicitly point to one direction/think is having multiple lines, ...


24

Just to offer an alternative hypothesis, the fact that the basic shape is two lines converging on a single point, might have something to do with perspective: In this case the sense of direction is created by our very own direction. There may not have been very many highways in paleolithic Africa, but the plains may well have had some similar features. At ...


1

Further to this, it can be surmised that direction could be interpreted from the drawing of a line in a particular direction (the action of drawing the line from East to West for example indicates "to the West"), BUT once the action of drawing the line is complete, there is no way to indicate what direction the line was originally representing (say to a ...


2

Having built a few apps in a similar space many years ago, the underlying UI/app framework is unhelpful. Essentially what you have is both a "List UI" and "Item details" on the same screen. Two basic options: 1. Have two separate screens - List & Item Simplest to implement. Arguably could be less efficient. download bmml source – ...


28

Is the arrow symbol truly universal? The United States launched two spacecraft in 1972 and 1973 with a message for any alien species that might encounter them. The message was specifically designed to be universally interpretable. It built up it's own number system from scratch using the fundamental properties of the Hydrogen atom. The goal was to ...


2

Tabs usually contain different data. For example different sections of a form, like @staccato said. Now each tab is a new annex which the user add. When adding a lot of annexes it will be difficult to distinct different tabs. Instead of tabs you could have a list of annexes and a plus button below it. (For creating a new annex) You can have a list of ...


31

Arrows have been an indicator of direction for so long that it's hard to say for sure, but my guess would be that an arrow fired from a bow only has one direction it can go, lending ease of communication when direction is needed. And since bow & arrows have been around long enough, and in practically every culture it has basically become universal. ...


3

Does using color help? Try using matching colors on the nodes of the flow chart and the connectors like so...


2

They will overlap unless you lift some nodes above the plane where the rest are. Another way to avoid overlapping would be show only connections that matter in given period of time/for given point.


0

Here are some common alternatives: Multi-pick <select> elements, e.g. in Bugzilla, but perhaps it is not the most usable for very long lists: Checklist approach is used usually just for collecting input for the next task (like archiving emails), but it should be possible to save the selected list as well. Select All option tends to be available for ...


4

Basically, mousestop would be used the same way as mouseover, but with one major difference. It only triggers if the mouse stops over the element. Or to say it more usefully it does not trigger useless events when the cursor enters the element accidentally because the user is just moving the cursor over the element or scrolling the page under the cursor. The ...


1

I understand that this is a data entry form for inserting and updating system entities into a database. Seems like a tool that people would need to work with on a daily basis and it's therefore imperative that the UI they use doesn't cause too much cognitive load, which results in unhappy users. The form you're presenting is over 20 fields long. I first ...


0

I would use a large, colorful icons arranged horizontally (like a toolbar). If this user can perform this action, then the icon is enabled, otherwise it's faded. When you click on the icon, the application space below is filled with the content of that action. This will provide access to each process and give visual clues to what steps are next.


0

I've been using Invision for a while and it allows to setup very simple interactions and also supports project collaboration.


0

Check out the Notification patterns for Android Lollipop, specifically the Summarize your notifications section. These are the Do and Don't images for Hangouts notifications: Generally speaking, Lollipop groups notifications in a "smarter" way than KitKat: categorical/app-specific notifications reduce the number of notification cards. Theoretically then, ...


0

We dealt with this question at my job recently and we used multiple charts in a dashboard design at first. This made it very clear what data set you were viewing, since each chart had a prominent title. In a later iteration, we switched to a solution similar to tabs: a dropdown menu to select a metric. The switch made it easier for users on mobile devices ...


1

Since it is a self-assessment it is best to go simple with the stars across each skill type. You 7 stars... the first star on the left being "Noob" the 4th star being "amateur" and the 7th star being "God or Rock Star". That way, the user an self assess his level with a more quantifying degree.


0

A very good reason to put them on the right are for your users who are using screen readers. These users will hear the contents of the row and last the checkbox vs hearing a checkbox without knowing the content of the row. They then have to hear the content and backup to the checkbox if they need to select the row. For these users it is a much better ...


2

I think you're right to be mildly concerned about mixing the units, and even if you could label the Y axis, it wouldn't make the problem go away. If you want to remain consistent in your units, breaking things out into tabs is a reasonable option, though it does detract from the 'at-a-glance' value of the data display. Creating tabs gives you a couple ...


2

Combining two types of data in one chart makes it difficult to read and understand at a glance. If you really have to keep them in one chart, consider using a visibly different display type - e.g. a bar chart to display kilograms and line chart to plot centimeters. A nice example could be seen here: Highcharts dual axes demo, also pictured below: Note ...


1

I wondered if you'd considered hotspot clusters? Like what the weather maps use to display the intensity of a storm? Or as in the case of this link, Earthquake Hazards: http://pubs.usgs.gov/fs/2003/fs017-03/ I have also been reading lately how the nba teams use cameras located all over the court to look at the way sports contests are viewed, understood and ...


1

I don't know if this will give you any ideas but I built a tool to try and visualize which skills were lacking (if any) in a group of designers. Each designer could basically condense their UX skills into a square icon. You can play around with it here... http://designerstats.com?4757931Dave


1

I agree there is a likelihood that the job description is incorrect. However server side frameworks provide tools to build UI. E.g www.codeigniter.com/userguide3/libraries/table.html Or http://symfony.com/doc/current/book/forms.html http://web2py.com/books/default/chapter/29/07/forms-and-validators#Widgets I guess the meaning is the developer needs to ...


2

You may want to look at real estate and apartment search sites and applications for ideas. A common practice is to use size to differentiate. You can also use shape. Where you might have a a round cluster pin (with our without radial), for an individual item, you might use a marker shaped like a map pin. There are lots of way to represent individual map ...


3

You should take a look at how linkedIn does this. Their competency ratings come from other users, and they make that transparent by showing who those "99+" endorsements came from. This makes the competency feel more real and believable. I'm not sure where your ratings will come from, but having a visual that's directly connected to the data is pretty ...


3

I'm assuming that you want to rate a professional's competency in a skill against the spectrum of possible competency in that skill. If that is the case, you may want to define specific levels (naïve, beginner, intermediate, advanced, master, guru, rock-star) with implied communally-held definitions. The skill name can then be followed by the ascribed ...


1

First of all This is in fact a switch. In essence, the user will choose from on of two positions, changing to alter behavior of some other element - a switch. In this case, the swtich has two "labels", manifested as icons. One of the positions will be in color (selected or unselected, is OP's question), and the other will be in grey. Grey color in UI ...


3

Version 2 looks to me more like a grid selection to me. But I am not your user (most of the UX community here probably is not either). I am also well aware of select/deselect and grid/list views because I design this sort of thing all the time. Your users may not. So let's dig deeper... Don't mix metaphors Showing something is selected with an active ...


1

Jakobs Law Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. as explained here http://www.nngroup.com/articles/end-of-web-design/ Furthermore, try to stick as close as possible to the users mental model. Users don't just confuse search fields; many ...


0

This will probably make more sense when you see it with the rest of your site, but right now the gray makes me think it's disabled. Below makes more sense to me. download bmml source – Wireframes created with Balsamiq Mockups


0

For some reason I can't add the followings as comment due to my low reputation :( Anyway; I always tend to keep the darker tones of same colour for its active state, same for hover; however it may vary from one design to another due to its overall colour scheme... The light grey/silverish colour of that icons only states that an icon exists, obliviously ...


0

I have always found that conceptual never works without ample on-boarding or education. This is a case where Jakobs Law comes in to play more than ever. Personally I'm not entirely sure what any of the example buttons would do but that could be the result of no context.


1

Definitely not the toggle switch — it is designed for mutually exclusive options, by introducing it you will be telling user there is no other option than the two. I personally dislike the labels, as they are often redundant once the icon idea is clear to the user. "Compare" is too non-explanatory and could mean anything in terms of UI, for example, ...


1

Testing is as expensive as you want to make it. Pay for usability consultants and participant compensation, sure that would start to become expensive. Take interactive or paper prototypes to a local cafe and shout a few participants a free coffee. Cheap in comparison. It always comes down to what you are looking to test (fidelity, complexity, etc) and ...


1

First of all: I understand you're under pressure and under some limitation. I will try to offer some improvements, but this is not the best solution, and might be problematic. Try to make the best of this by Monday, but try to get another timeframe for improvements. Suggestion: If you must view, edit and add on the same UI, tread carefully. You're ...


0

The most obvious choice for me here would be a Check mark icon.


1

If you want to request the user to perform some action before he/she can proceed then you should use the exclamation mark icon. It draws the attention of the user without being overly dramatic. An error or warning symbol might be interpreted negatively (blaming the user), but an exclamation mark is more neutral while still demanding attention. In general: ...


2

I really like the stack option mentioned above as a simple solution! There is as a fairly important consideration though: Using colours can be an issue for those with colour-blindness, namely your green and yellow will be practically indistinguishable. As its a primary metric this might be worth noting? In the effort of helping give more ideas, why not ...



Top 50 recent answers are included