Reusable solutions for commonly occurring problems in user interface and user experience design.

learn more… | top users | synonyms (1)

5
votes
1answer
100 views

How to Display Occasional Announcements on a Website?

I’d like to add an announcement banner or an element with the same functionality (e.g. alert, button) to a website to notify users about an upcoming survey. It should contain a call for participation, ...
5
votes
3answers
178 views

What are the advantages of existing real world patterns in Information Architecture

When explaining real data structures to users, companies often use a parallel to the real world to help explain it. An example is the newsstand on an iPhone. When is it a good idea to do something ...
5
votes
1answer
2k views

Which design pattern is the best option for drilling down into data?

I have quite a large dataset which I need to display to end users. These data are grouped by super group, medium group and junior group. Medium groups are children of super groups, and junior groups ...
5
votes
1answer
303 views

Chrome Options UI Pattern Name

I've been looking for a way to organize hierarchical data. I came across the UI in Chrome Options. I really like it and think will work well for what I need. Is there a name to this pattern? As you ...
5
votes
5answers
632 views

What are some examples or design patterns of an aggregating website with different types of content? [closed]

I'm designing a website that is meant to aggregate on it's homepage different types of contents such as: Blog posts from around the web User generated movies, presentations, documents, pictures etc. ...
5
votes
2answers
238 views

What is the name for a pattern featuring helper text in a semi-transparent overlay?

I am seeing an emerging design pattern in web apps that is used for helping new users get oriented to a page or application. It consists of showing a diagram with succinct helper-text over a ...
5
votes
1answer
639 views

Drag and Drop: Better to avoid drag-n-drop to offscreen elements?

I have a particular web interface in which drag-and-drop may be useful, however, the problem that I see is that the list of items to be dragged could potentially be very long (below the fold). Is it ...
5
votes
1answer
234 views

Documented guidelines for one-handed mobile phone interfaces

I'm trying to come up with user interface ideas for a mobile app that can be entirely used with your thumb while holding the phone with one hand. While I've looked at Apple's guidelines it doesn't ...
5
votes
3answers
919 views

Alternative sites devoted to UI micro features

Little Big Details is a microblog that shows screenshots of various user-interfaces, highlighting the the "little" things that make a "big" difference. For example, the latest entry highlights a ...
5
votes
2answers
346 views

Best practice for in-page search algorithms (not SEO for Google or the like)

my team and I are working on a football hub website and we would like to make the in-page search engine as powerful as possible as many uses would like to use search. Q: Are there any best practice ...
5
votes
4answers
693 views

Examples of designs that keep a title or heading in view [closed]

I'm looking for examples of designs where there is special logic that prevents a title, heading, or landmark from being moved out of view, so that the user doesn't lose their context. Examples: ...
4
votes
5answers
2k views

Slide out teasers near the bottom of the page?

On more and more sites now I'm seeing what I'm calling "slide out teasers" appearing at the bottom of pages. What happens is I'm scrolling down the page and nearing the bottom, and then a small box ...
4
votes
5answers
657 views

Encourage users to tap the “review” button

How to layout an Info screen, so as many as possible are tempted to tap the "review" button? I wish users would tap the "review" button and write a long positive review on the app store where they ...
4
votes
6answers
621 views

How should a breadcrumb behave?

What is the expected action when a breadcrumb is clicked? I have a hierarchy of data that includes meta descriptors such as: PersonName / Assets / House I have a page for a list of Assets, a home ...
4
votes
5answers
366 views

Best way to represent distance in a clear way?

I'm building a job board and the user can search for jobs around its hometown. It can adjust the radius using a slider. Example: 1) User enters "Brussels" in the input box. 2) User changes the ...
4
votes
3answers
198 views

Completing a process in linear steps - what should happen if a user changes one of the previously entered steps?

I'm working on a tool made for professionals to calculate advice for their customers. The user is following predefined steps. The steps are represented as tabs (with arrows) in the interface. The ...
4
votes
3answers
3k views

Are mega footers good UX? [duplicate]

I've noticed that several websites — especially universities and web development sites — have recently started placing mega-menus in their footers. Here are some examples of what I ...
4
votes
3answers
138 views

When should feedback be in-page and when should feedback be a separate screen?

I've seen feedback/confirmation on a separate screen for example when the user has submitted a form. Then the next screen they see: "congratulations you have successfully..." Then on other occasions ...
4
votes
6answers
655 views

Good example of a Keyboard Shortcut Manager implementation [closed]

I am implementing a keyboard shortcut manager in which the user can assign shortcut keys to global (or contextual) commands in a Windows desktop application. Note that the application has load of ...
4
votes
2answers
1k views

When designing (UX/IA) a property search system what are some important things to remember?

I'm designing the UX for a property search system. The platform is FSIS. I am basically looking for best practices in doing a Faceted Search while being able to incorporate many refiners based off the ...
4
votes
3answers
293 views

Pattern for navigating by typing text in a text-field

I am working on an application which has a very dense UI with lots of menu items. Is there a UI Pattern for navigating to different screens by typing text in a text-field? The keyboard focus is on ...
4
votes
3answers
108 views

Tables with a lot of rows - where should the delete option be?

Question regarding how to handle large tables with many rows: Where should the delete option be? I see many examples placing the delete icon or text on the far-right of the row. Is this best ...
4
votes
2answers
167 views

Evidence of Button-action and Link-action in the same scope?

When I started to know GUI in the early 1990s there were always the same type of control to perform an action of the same type, even though the action was different as in [OK] [Cancel] and [Yes] [No]. ...
4
votes
2answers
502 views

Best practice for displaying no of records on datagrid

I am designing a banking application where i have a record count of over 1000 rows. I wanted to understand the ideal design patterns for pagination and displaying rows on a data grid. I am ...
4
votes
5answers
727 views

Where do people get web design patterns/inspiration from?

I like to think I come up with original concepts as and when I can but I do find it really gives me a kick start when I can see examples of what other people have been doing to inspire my own design ...
4
votes
3answers
424 views

Multiple instances of a Property Editor

I am designing an application in which several kind of user objects have properties. When clicking an object, the properties of the object would be shown in a pane similar to the Properties pane in ...
4
votes
2answers
296 views

How can you show human element without showing pictures of people?

With a company that changes all the time, how can you show the personal touch of human interaction without showing pictures of humans? Essentially, blurring the line between technology and people, ...
4
votes
2answers
158 views

Why Google and Facebook use one text field by page for account creation?

I would like to know if there is some reason to have the account creation tunnel that way. Is it only because user focus more on an action by page?
4
votes
2answers
372 views

Can I use drag'n'drop interaction in a mobile website?

I'm currently designing a mobile website. My intention was to use interaction patterns like drag'n'drop for some interactive features. E.g. I want to ask users to sort 5 items by personal relevance ...
4
votes
1answer
372 views

Alternative to a columns of checkboxes in a table

Here's the scenario: A Person has a bunch of Accounts. Accounts may (or may not) have Services attached to it depending on the type of Account. Currently there are two types of Service (indicated by ...
4
votes
2answers
388 views

What is a good UI metaphor for switching roles user plays in the application?

I am building a conference/tradeshow application where a user can assume multiple roles within the application and within a particular conference. For example a user can be an attendee, and have ...
4
votes
1answer
354 views

How would you design a two stage bar chart drill down?

A common design pattern I've used is using a horizontal bar chart to visualize numeric data about a series, and a click through drilldown that discloses a pane with more detailed information about the ...
4
votes
5answers
308 views

How to visualize similarity of one file to another?

Problem My file-system is a mess, over the years I've been accumulating way too many downloads I didn't care to uncompress and organize, code that was subject to endless copy+pastes and improvements ...
4
votes
2answers
263 views

What to call UI element like 'like' or 'mark as favorite' ?

Is it a kind of button? Do such UI components have a specific name?
4
votes
2answers
242 views

Is there a particular reason contextual content areas and menus aren't more prevalent in web applications?

I'm developing a user-driven sandbox application, wherein the user (more or less) builds their interface. In my preliminary web design drafts, I've found myself favoring a contextual content area at ...
4
votes
2answers
98 views

How to place text and a gallery side by side without giving more relevance to one or the other?

I have some galleries and some text (2 o 3 word pages) attached to each gallery. Until now I've had a gallery and the text in two different pages, with a link bar to switch between one and the other. ...
4
votes
2answers
433 views

What is the best way to organize all UI elements of a website in one place?

I'm looking for a good way to help us organize and keep track of the latest version of UI elements. The simple way I've found is to have one big file, maybe 10000 X 10000 pixels with all your UI on ...
4
votes
2answers
260 views

How would a perfect overview for 400 competitors look like?

I have to create an overview for a competition with about ±400 competitors. They are separate in the "best 100"-group and the others. A random number of competitors shown as thumbnails with (if so) ...
4
votes
3answers
279 views

Is it better for website accessibility to have the menu before or after the content

I have seen two approaches to menu/content markup order in relation to accessibility for keyboard only users: Menu first then content with a skip to content link at the top Content first then menu ...
4
votes
3answers
308 views

Communicating changes and new feature in my web application

We are currently in the early phases of developing a web application for a client. We have regular sprint demo's during which we take the client through the new features and changes from the last ...
4
votes
1answer
682 views

A use case for popups?

I had always believed that popups, opening in new browser windows, were bad practice for various reasons including: Breaking the flow, bad for accessibility, potential to hide content etc. While ...
4
votes
1answer
169 views

Handling space constrained interfaces with many meta data options

I have the equivalent of a timeline with individual objects that can have many options. The issue is that the visual representation must remain constrained to easily read the timeline. The current ...
4
votes
3answers
501 views

Using a table within a mega drop down

I've a quick question about combining a mega drop down with a tabular list view. Ideally I'd prefer jut to have the list to pick from but the list also requires sorting. I'm not really sure that this ...
4
votes
3answers
162 views

In place editing in search result and searching again

I am looking for existing solutions to a user interface problem. My users have the ability to search in a list of items. The items can be either single or composite items. In the search result the ...
4
votes
1answer
6k views

UI Patterns for tables with many columns

I have a table with many columns,this table displays without scroll only on 21 inch and larger monitors. If there is a ui pattern for tables with many columns?
4
votes
2answers
217 views

Data to reinforce the 'large login form fields' style?

We're working on a site that requires the user to login to use. We designed a sparse login page with a large login form. Akin to Gmail: This seems to be the trend as of late. And it makes sense for ...
4
votes
2answers
1k views

Pattern to display Many to Many Relationships in two grids

Following is the data that needs to be displayed, to which the user can make changes or add new entries. For capturing a contract, there is a set of documents that is maintained and for each document ...
4
votes
1answer
267 views

UI pattern for shared editing scope among selected elements?

I'm having a hard time researching this pattern for WPF, partly because I'm not exactly sure of the correct term for it. As best as I can describe it, here is how this editing pattern works: ...
4
votes
5answers
457 views

What is the best pattern to distribute items into several buckets

Let's consider the following: A company wants to ship 3 types of fruits (apples, watermelons, strawberries) between two cities. Company has got 3 cars that can be loaded with fruits. Each car has a ...
4
votes
1answer
365 views

Is it appropriate in a touch-based mobile web app to place the equivalent of “apply” in the header?

I'm creating a mobile web app for modern touch-based browsers, and I'd like to know if it's appropriate to put the equivalent of an apply / search / go / view results / proceed button in a thin ...