New answers tagged design-patterns
0
If I were designing my search results page to be responsive I would think "Mobile First". Constraining yourself to mobile will force you to make choices about your faceted navigation system. What options do users really need? What can you remove while retaining a "good" user experience?
A few other questions:
Will users have the ability to refine their ...
1
Or is it a new tendency regarding UX, regardless of having both Android and iOS versions of the apps?
It is a great solution for having more than 5 (bottom bar) menu items available. The slide-out menu means you don't lose track of where you are, a problem when accessing a menu through pagination. Since most apps use a fixed header at the top of the ...
0
From my experience this is primarily used as an SEO play as you can link to your whole site with keyword-rich anchor text.
It is also a great place to put "orphan" pages that dont get linked to elsewhere on the site like privacy policy, copyright, etc.
3
The increasing prevalence of such footers implies that there must be some research supporting their use, but I haven't yet encountered any. Have you?
I think you're placing too much emphasis on the role of research as a driver of design principles. I would say that these things emerge from designer intuition, and proliferate if they don't cause serious ...
0
You mean like whitehouse.gov?
Personally, I love the feel of a website when it has menus and links on top and bottom. When I'm on my phone, I'd hate to read a page, then have to scroll back to the top to find the navigation.
Also, typically, the bottom contains links which are more descriptive, along with extra links such as sitemap, toa, and copyright ...
2
What your client proposes works, I would change the order though: Accounts first then services.
It is understandable, there is no confusion, you can add as many services as you want.
download bmml source – Wireframes created with Balsamiq Mockups
Maybe what is confusing is the fact that the services names are numbers so I imagine there is some ...
0
My opinion is that there are a number of different reasons for the 'trend' (I've seen this used in some very old applications before, so apparently it is popular again). Interestingly enough, before everyone had wide screen monitors, there were different strategies for hiding information, and this was one of them. I think many designers struggling with ...
0
You said:
"However, our users are having trouble finding their results when returning later to the software because (1) while they understand that it was autosaved, they cannot find their result by name (they don’t recognize the “Untitled” name) and (2) they didn’t know they could click on the title to rename it..."
Can you show us the screen precedes ...
2
I think option 2 will generally work best. People generally fill out forms sequentially so you'll run into fewer errors and you'll have an obvious field to flag with any errors.
If you just don't like having redundant fields on the page, I recommend the pencil from 1 and a non-modal version of 5 (modals interrupt the workflow, take you out of the context ...
1
I usually just annotate the wireframe with a note:
------------------------
| |
Search: / Search field uses |
[ enter search term ] \ autocomplete |
| |
------------------------
...
3
Assuming you're using a wireframing format where you can hide dropdown elements to see what's behind them, it's fairly common to show the autocomplete form with a few letters typed and a few rows appearing below it.
Some examples from pattern libraries are:
from the Yahoo Design Pattern Library
from CollectionSpace.org
from Welie.com's Patterns in ...
-2
Well, Have you considered using simple "X" in some bright color like red? A bright color attracts users attention immediately and will be easy for the developer too to understand it. Similarly you can use '✓' in green if the information entered by user is correct.
5
It is absolutely okay to chose that pattern. The only thing you should worry about is making the link different enough from the others that user will know that something else will happen once he/she clicks on it.
The easiest and least subtle way to do this would be to style the tab completely different from other tabs — for example like a link:
Or you ...
10
While you could probably get away with it, it is a bad idea.
If you're going to use a well know pattern like this, it raises an expectation about its behavior. This is why patterns are so powerful and useful: users will recognize them and immediately be able to build a mental model of the way your website works.
If you break this pattern, you break all ...
0
Note that the 3 stacked bars is a metaphor for the vertical beveled stripes that physical vertical draggable objects often has. Check the back of a remote, you'll probably find a similar pattern on the lid that covers the batteries.
The line of dots (as Roman Nurik showed) is therefore, in mho, a better metaphor for something that is draggable in all ...
0
Actually, I would say there is a standard icon and it is three horizontal bars stacked on top of each other. Ideally the bars should look slightly raised as though they are a "grip".
See this for example: http://www.hongkiat.com/blog/jquery-ui-sortable/
5
Readability is everything
Smashing Magazine conducted a Typographic Study for best User Experience. What they found is plain clean backgrounds with standard type treatments tend to work best. People will typically have an easier time reading what they're familiar with. There is no one set rule for the number of characters per line. It depends on the amount ...
2
A few suggestions:
Use different fonts/colours for breadcrumbs and body content. This look the same and it's not easy to differentiate where sections starts
Separate sections, title and content so it's easier to notice scan through in case the user doesn't want to read all
Don't add any background (zebra) to the images, it's just noise for the eyes
You ...
1
There are a lot of excellent answers here (makes me wonder if michael intends to vote for an answer at all). I would emphasize one critical point:
This question all but impossible to answer in general terms.
The transition from mouse to touch is a delicate and multifaceted challenge. No one can give you general guidelines that will answer your unique ...
5
The purpose of zebra striping is (with arguable success) to connect items in a row that are a distance apart...often as you'd see in a table and where scanning (rather than reading line-by-line) is often a goal.
Item Item Item
But a paragraph of text has no such problem--the lines of text, themselves, make ...
2
Using zebra stripes in a paragraph is not a good idea. Zebra striping is a solution for improving readability of tabular data and even that is a debated area - http://alistapart.com/article/zebrastripingdoesithelp
There is no repeating structure in the words of a paragraph, which is a good thing since it makes lines easier to distinguish. When you use zebra ...
0
You can look at references of touch gestures/actions from searching on the forum and see if you want to trigger a menu based on a specific gesture, and Luke Wroblewski's Touch Gesture Reference is pretty comprehensive. I think on apps there might be a standard, but for websites the context menu should be redesigned so that it is not required, especially if ...
17
I think you're trying to solve a readability problem the wrong way.
Line length (measure) is your real problem. The number generally advised for a readable measure is about 60-70 characters. Cut the measure to about 60% of it's current length and you'll find you have far less trouble. The other way to solve it is a bigger font size ... that would be really ...
1
What “contextmenu” ? Do you know that the contextual menu is governed by the Web browser, not by the Web page ? I hope that, on your site, your “contextual menu” is not the only way to reach its actions. Otherwise, these actions are not accessible and your site is broken.
At first sight, I thought you were building an iPad app. That may be the best to do.
...
0
Mega menus, like other fold-out menus, are only meant to offer selection of an item form that menu. You open the menu, select an item, the menu closes again by itself. Clicking outside the menu, or on the button that opened it, closes the menu without selecting an option (or changing the selection).
If you put more functionality in such a fold-out menu, it ...
1
I think your problem stems from the fact that you're attempting to get more from this UI element than it's meant to deliver.
Dropdowns are generally for selecting items. Ok, other actions, like search, are often implemented into large mega-menu-style dropdowns, but generally you click/hover and select from a list of items. Once you get into more complex ...
0
The general usage for mega dropdowns is in the context of a navigation menu that is more complex to navigate using different levels of hierarchy compared to a flat structure. The individual items will generally be grouped to allow users to scan quickly and work out where they need to look. If you are using this to select an individual item from a related ...
3
I would recommend two actions:
Keep the thumbnails screen clean, minimizing the chrome and buttons. A tap on a thumbnail opens a new screen that contains the photo and an action bar with all the desktop context menu options. You can hide this action bar in a few seconds (or with a user tap) to keep the photo alone. This way you have a safe and visible ...
2
If you like the opposite approach of first selecting the property (or tag), and only afterwards selecting which items to apply it to, you can use a button next to each item. Something like "Add property".
download bmml source – Wireframes created with Balsamiq Mockups
If the property has no value (like a tag), then you can show it next to the ...
0
I like to use tags in one of the corners and if you have a tag image which says new then great because that eliminates any guesses needed as to what it means. Changing the colour can be effective as well but it should be subtle so that it remains consistent with the other posts
Top 50 recent answers are included
