Tag Info

New answers tagged

0

Why are you fixing its width? Surely the size of the message box is dependant on the size of the message. Short messages (such as you have illustrated) will look better in a smaller box, which could even be centred. As the message size increases the ideal box pushes wider until it fills the entire screen. However you refer to messages which leads me ...


2

Interestingly we are working on similar patterns this week, the design we are recommending has a clear classification of error messages. Classification based on type : Error, Warning, Info Classification based on target : which part of the screen is initiating the message. The first classification is used to decide on the color and fading properties. ...


2

Your solutions (both of them) are quite reasonable and can be used together. Showing the best matches at the top is best when almost always the desired result is in the top few. User research will tell you if you should show the top 1, 2, 3, 5, or whatever. You can add a link to the best matches that jumps the user down into the document-ordered search ...


0

I think there are a few more things to ask about this. What sort of result will give best value to the user? How many results are you expecting from an average search? How much context is required to make the results useful? With most word or phrase based searches it's best to show the results in order of relevance: Searching for "cats washing" should show ...


2

I identified two approaches: 1. Make a list of the 3 best matches at the top of the page, redirecting to the elements in context This technique you’re referring to is called “Best bets”, and can take many shapes and form. BBC used this on their search page before but have for some reason taken it away. But in your case, I think it’s a good idea. ...


2

It'll be hard to suggest how to consolidate two interfaces without seeing them first. Your question is a bit more of action consolidation - to which the answer is yes, this is possible: You can provide a two column view, one for users one for groups, multi-select list in each, and allow drag & drop between them, both ways. Something similar to this ...


0

Tab enter for auto complete is a common implementation Use multiple tab to navigation down the list Esc key to cancel Typical auto complete is match at only the beginning. You want to auto complete IN the text. The algorithm there is go back maximum characters that has a match. So if there is 5 matches at 40 characters back then those first. And maybe ...


2

Ideally your system would be adaptive and learn over time from things other sales reps have typed in. As long as you only show a manageable number of options while the user types and keep them out of the way (yet easy to access with the arrow keys and enter) then you will have a winner.


2

When the system recognizes the start of a sentence that is in the default sentences it pops the sentence and can be clicked (something like the tag functionality here on SE). This will give a lot of false true's which might be annoying for the user. I would go with this one. It's done in Microsoft Excel (which is fairly ubiquitous). The only time this ...


4

Add text for clarity and images for quick recognition UX is more about solving problems and making things easier for people and not about pretty icons. Images should enhance an already functional UI. Although this may be way off base from what your application is trying to do this would be more intuitive to first time users...


1

If you're talking about the hamburger icon and the "me", the way to break the table appearance of your screen is to swap everything around: Put the magenta camera icon on the left and the "Me" to the left of the hamburger (menu) icon which would be on the far right. Edit after feedback about my misunderstanding of the question You are asking what will make ...


0

What if the date navigation panel is fixed and does not scroll with the rest of the screen? Then it will always be visible, and the user can select dates regardless of where he is in the field of thumbnails..


0

This is a really cool question. Have you considered coloring the background area of the thumbnails and coordinating that with the date list?


1

I always do this manually as it is hard to find a balance between something that has enough tonal and visual contrast, but still is WCAG 2.0 level AA color contrast compliant. The bootstrap buttons are always a good starting point for getting a feel for tonal differences http://getbootstrap.com/css/#buttons Color wheel is a useful tool ...


2

Another approach is to create a custom widget which shows range of years user can select and let user select from year (first click) and to year (second click). If only one value needs to be set that second click outside the dropdown will indicate that user is trying to change from or to date and wants to apply it. To select same from and to year, user has ...


2

Having the button up top is a good place considering the main function of this program. Ideally refresh links appear in context next to stale data If you can refresh only a part of the data and show it as soon as possible while other data is still being generated then that is ideal. You can then add a refresh link to each card in a consistent location ...


0

Question: How much additional information is required for the custom option? If you can get away without using a dialog, I would recommend doing so because it can potentially interrupt the process of managing the rest of your properties. Assuming settings on a web form, consider this: download bmml source – Wireframes created with Balsamiq ...


5

If you want a logical way to display it, I'll go trough that And by the way, care about typo size if you go responsive, that's quite low here.


3

Honestly, as long as your :hover state & :focus state are very clearly showing exactly which item will have action the taken on it, I can't see any reason to style them separately. :focus is essentially a keyboard hover. The previous answer is correct in saying that a :focus element should contain a box around it, but as long as the outline property ...


0

Try and do this in a single list A single list of selectable/unselectable items is usually easier for a user to handle. There are other ways to help the user see and confirm the list of their currently chosen items. You could do this by listing all the chosen items automatically in another list off to the right or using a toggle button that quickly shows ...


0

I had this problem some time ago. And like you, I hated the idea of using the clunky standard two-columns interface for inclusion and exclusion. So I decided to make something like this instead. Basically I let the user add groups, and then create the exclusions within each group. I also used an Autocomplete control that helped the user find the correct ...


22

If the data is tabular, then I see no reason why one shouldn't go with tables? After all, the whole purpose of table element is for showing such type of data. But if your query is how to make the tabular data look more beautiful, then read this article - http://darkhorseanalytics.com/blog/clear-off-the-table/ In nutshell, it follows the principle of 'Less ...


2

I think there's a lot of confusion as to what Lorem Ipsum is and what it's really designed for in these answers. In general, Lorem Ipsum is a way to fully flesh out a text-heavy page layout when the real content isn't ready yet. Most graphic designers and ad agency folks will understand this, but few others do (nor should that, as it's really just a bit of ...


0

What you are describing is a very UX pattern, which is a policy editor. Generally, this entails selecting and editing a policy, and visualizing/editing the scope of the policy. Usually this results in an interface similar to what you sketched out, but with some adjustments: For the left hand column, it's unclear whether the checkboxes are controls or just ...


3

While »Lorem Ipsum« is great for the early design stage it is nearly always worth to change the blind text to localized dummy text (Yes, this is additional work which seems not necessarily needed. But it shows you're paying attention to details.) The trick is to use text which looks like a normal reading text – this is very important! While most people ...


3

Why waste the opportunity to promote your clients, company, or products? I realize you're trying to give them something without meaning so they won't focus on the words, but if you give them the same positive words about your product every time, they will read the message once then quickly overlook it from that point forward. "You are a balanced and wise ...


2

You are using this on a mobile application where the screen is small. Why not try the shorter phrase? The quick brown fox jumps over the lazy dog This has the advantage of showing all letters on screen in a concise manner. I spent a few seconds on a search engine and found http://www.cl.cam.ac.uk/~mgk25/ucs/examples/quickbrown.txt. So as you can see it ...


0

In my humble opinion as the comments go my first reaction to this winform is that this something of the past and I should get out of here as soon as possible. It's nearly scary! BUT if the app is targeting a forum of guys who are madly in love with the windows xp(erience) then knock yourself out! That being said let's move to your specific issue. You ...


7

Choose a text generator that suits your domain and use it instead. Lorem ain't good for layout/typography, it was never meant to (see other answers for why it's not, unless you are in a real printing business, Gutenberg&co-style). If you're after font/typography, use a pangram for the language you are after (hello localization!), like @ratchetfreak said ...


5

Here is another option that might work depending on the situation. It has the added benefit of not needing to be localized into different languages... credit: Facebook placeholder loading card


0

In that people expect old things to look old, and new things to look new, I suppose there is some validity to that. I have no data to back this up, but I strongly advocate the abolishment of tooltips--at least in the context of forms. For a few reasons: they're rarely consistently implemented and become usability hurdles they're often poorly coded and ...


1

I'd suggest it's not an aesthetic issue so much as a functional one. The tooltip just happens to be part of an older approach to solving this problem. People don't expect them on newer sites because they aren't as useful and have since been replaced by other solutions. Because you can't "hover" on a phone or tablet the "old" tooltip approach is now largely ...


7

If the text preferences are important, you should not use example text in a different (which includes fictive) language. Languages have different characteristics, and what looks fine for a paragraph of "Lorem ipsum …" is not necessarily ideal for text in other languages. So you should show text in the language the user is setting the preferences for. You ...


3

In my experience, Lorem Ipsum is beloved of typography fans, and unknown to the common man - aka, the client. So, if you want to avoid a discussion with the client about why the text is garbled, and why you selected this placeholder text rather than some text saying "this is placeholder text" and then properly exercising as many code points and ligatures as ...


12

If the goal is to provide a short text sample for the style then use a pangram like "A quick brown fox jumps over the lazy dog". This will show how each letter is rendered.


30

Font and layout is exactly what Lorem Ipsum is designed to do. It has been used by type setters and printers since the 1500s. The idea is that by not having real words the users focus on the layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is ...


57

Designers When it's your working version and you just want some text in there to visualise the overall page balance, and you'll only share it with other designers, then using Lorum ipsum should probably be fine. End users For end users, I would suggest using some other real example text. Yes, you'd have to localise this, but it's quite easy to simply ...


0

I am programmer learning a bit of UX so I may get beat up by UX purest but I capture metrics on user productivity. If a top performing user asks for a tweak I will take that over a low performing user. I am in an environment where contract data entry use more than one product. Too often a low performing user will state the (my) product is the problem. I ...


0

User Experience isn't about taking exclusive decisions, is about make the overall experience for the majority of users, the best as possible. I will use your use case as an example. Previous version Single text field, coordinates separated by comma. Advantages: copy/paste is smooth Disadvantages: readability New version Two text fields, one per ...


15

You can't please everyone Most changes or additions will leave some people behind. They may catch up later, they may hate you forever. Shoot for net gain in the experience. If you avoid negative feedback, you avoid progress. It helps to keep a destination in your sights. Focus on an established list of goals for the long term vision of the product and the ...


2

Items on the Left / Groups on the Right Users scan from left to right so interactions should follow suit. Especially in your case where the target groups take up most of the screen putting the list of draggable items on the left is the way to go. Be sure to test this with your users as the opposite would be true when targeting countries that read right ...


21

Try to distinguish between what users want and how they want it done. Taking your example above, users wanting one vs. two input boxes is all about the how. The what is being able to paste comma-separated coordinate pairs vs. not having to press comma. (Or, for some users, being able to simply press comma rather than having to click a second input box.) In ...


3

Accommodate both! In this case, your users told you exactly what they were missing in the old version (in this example, easy copy/paste). So create a new way that meets both sets of requirements. Generally speaking, say the old way offered Features A and B, and the new way still supported Feature B, lost feature A, but added feature C. Users said they ...


1

Why not make it a little more friendly and fun in terms of the UI? Add a face to the transaction so the users can see who's asking for what. Also be careful with your buttons. How they are displayed now makes them look equally important and harder to distinguish between two really important actions at a glance. I suggest: download bmml source – ...


1

You are calling it a checkbox, but checkboxes come with labels. Why do you consider clicking as the correct usage for this? To me it seems like the developers haven't yet added the ability to drag the control, which usually happens as you move an application from a web to a mobile interface.


3

This is just plainly bad design. There is no tricky explanation as to why some of your users fail at performing the task. This is a fantastic example of how skeuomorphism doesn't work everywhere. The core purpose of skeuomorphic design is to present users with controls that they can recognize from the physical world and can interact using similar gestures ...


3

The visual metaphor here is an ON/OFF toggle switch It starts out in the OFF position to the left and can be turned ON (illuminated) by moving the lever over to the right. (the fact that this can only be done with a click is simply poor implementation) Read more about this pattern and how to improve upon it in this thread... Should a toggle button show ...


0

Edit: To answer your question in the body: "Are the designers mistaken by making it clickable, or is there another explanation I'm missing?" It is a usability problem if users cannot easily figure out how to operate the UI element. If the design is not being used as intended (by the designer), then there is a flaw in the design. If the majority of people ...


8

The focus state should be more obvious than the hover state A mouse over or :hover state is a more direct interaction (i.e. the user is controlling the mouse cursor directly over the button they want to click) The :focus state, on the other hand, requires a separate scan of the entire page in order to determine which component is currently being targeted. ...


1

Avoid having a separate preview page Guessing and checking is a cumbersome approach to user input. Nobody likes being surprised after hitting a preview button only to have to go back and figure out where the mistake is in the markup. Even if the screen is small I would prefer scrolling down and back up without going to a separate view the way stack ...



Top 50 recent answers are included