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

learn more… | top users | synonyms (1)

0
votes
1answer
27 views

Assigning modules from a library to a server where the amount of modules can change?

I need to create a design for an internal tool that we will try to utilize within our own team that works with software testing. We will try to build a tool that can help us automatically setup a test ...
3
votes
4answers
368 views

File Picker vs. Drag and Drop for Tablets

Imagine that you're creating a presentation on an iPad. You want to create a presentation, add content to it, and rearrange it as needed. You have a catalog of content to choose from, sorted by ...
0
votes
1answer
43 views

Research behind current design patterns? [on hold]

Recently I have found that so many websites are starting to look the same (logo left, menu right, nav floats, big large cover image (blurred e.g.), flat light design. Outside of these just being ...
1
vote
1answer
69 views

How to convey the “primary vs. secondary” button for screen reader users

I have an application that needs to be accessible for screen readers. This application uses bold text on primary button to convey information about the "recommended choice" like in the example below ...
1
vote
2answers
73 views

Name That Pattern: side 'panel'

Please can someone name this pattern - where you edit something in a table and, instead of allowing you to edit the content in a modal dialog, you edit it in a docked side 'panel'? As per the ...
0
votes
1answer
231 views

Process wizard indicator on Windows phone

I'm designing a 4 step process on windows phone porting from iOS. The process has 4 steps in it, with multiple different micro-processes on each screen. Can anyone point me to an example pattern on ...
1
vote
1answer
119 views

Color complimenting like Google's material specs

So here's my dilemma. I like Google's Material Design Color Specs, and they've obviously spent a fortune researching all the hues and shades. However, I'm dealing with a project where the end users ...
1
vote
0answers
26 views

Using Javascript popups to create a workflow for legal experts writing and editing legislation

I suppose this is a ui-flow question. I'm currently working on a project where a couple of the stakeholders are suggesting the use of popup windows, i.e. browser tabs, to create a workflow to ...
1
vote
1answer
105 views

Explicit vs Implicit save. Differences between Android and iOS expectations

Our app makes use of a 'Shopping Cart' type metaphor, in which users can select from a variety of items, and then confirm or remove all these items at once. We'll call this explicit save. The ...
0
votes
2answers
24 views

best practice: how to handle data entry / modification & storing changes thereof

I have a page (HTML) containing multiple tabs, all filled with various settings. Those settings are further divided into groups which are nothing more than separate REST calls to the server. Each ...
3
votes
1answer
91 views

Should I use a button for an often used value in combination with a text field?

I'm doing a redesign for an auctioning website where users have to fill in numerical values (their bid) in a text field manually. A commonly used option is to bid the next minimum bid. Is it a known ...
4
votes
2answers
291 views

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

The idea would be that if you had a menu: Feed | Settings | Logout And for example, the user is on the Shared Documents page, and clicks Settings: Feed | *Settings | Logout *Shared --> ...
3
votes
3answers
102 views

Select duration using numeric input + menu of units, or a single slider?

I have a notification panel which is designed for users to receive notification once something wrong or changes happens in the system. So there are two tasks that are for regular checking. These two ...
1
vote
2answers
64 views

“Inclusive/Additive” vs. “Exclusive/Reductive” filtering - How to differentiate?

I'm working on an HR application where admins can define the scope of a user's role based on their location and organization. So as in the example below, a role may be limited to the "Los Angeles" ...
1
vote
2answers
47 views

How to properly manage exchange between two lists of items/products in a desktop web app?

I'm working on a Web App UI mostly for desktop (but also working on tablets) where the user has to manage inventories in a modal window. He needs to select items from a stockpile (i. e. a large ...
1
vote
3answers
71 views

What's the design pattern at the end of infinite scroll?

I have an app (iOS) that outputs a grid with all the applicable products. Is there a prevalent design pattern that indicates the end of infinite scroll?
29
votes
7answers
4k views

Why does the golden ratio work? Or does it?

This is just one example of an article promoting use of the golden ratio in design. Over the past few years I've seen quite a few similar articles, but none of them really seem to go into depth beyond ...
1
vote
4answers
281 views

Different design patterns for the same action within the same app

I'm working on a large website editor application, and in order to achieve the "best" initial designs I have slightly different versions of UI patterns according to the context in which they're being ...
2
votes
3answers
93 views

How to display that the product has different sizes?

How can I display that the product has different sizes available in stock in the homescreen/catalog without redirecting the user to a product details screen or by opening a pop up on the desktop. Keep ...
1
vote
2answers
41 views

What are Material Elements in Material Design?

I got confused regarding Material Design. I was reading material design guidelines and i learnt that material is a 3D Environment with x,y,z axis and Lights, Motion.... When reading Material ...
0
votes
1answer
61 views

Editing a list that can be filtered while editing. Save edits that are not visible?

We have a long list with accounts for which users can set permissions through checkboxes in this list. But users can also filter the list (say with a search query). But what if a user sets ...
4
votes
3answers
114 views

Is there a better solution for picker control on iOS

I'm doing a form field on an app and need to included a drop down at the end of some of the text fields. For the android version I'll be using the material design standard as below. for iOS, they ...
0
votes
2answers
58 views

Where to redirect a user when he send a quote?

I have a web site where professionals can send quotes about their services to whoever need them. To send a quote is a simple form; my question is: what should happen after the user sends the form? ...
2
votes
0answers
53 views

Scroll up and hold on desktop?

I am doing some research on a pattern that would allow to display more information when scrolling up, in a desktop app environment. Similar to the band's profile page on Spotify on mobile (album cover ...
0
votes
0answers
52 views

Best UI pattern to group multiple uncategorised items (i.e. questions)

Problem: User has an ability to add x number of questions (uncategorized questions). Normally, user adds 2 - 5 questions. However, the problem is when the user add more than 10. The tricky part that I ...
5
votes
3answers
261 views

What are conventions for keyboard shortcuts in Windows and OSX?

Keyboard shortcuts in Windows appear to follow some sort of convention based on the modifier key, but I can't figure out precisely what it is. Here is my current best guess: Ctrl-* often does a ...
5
votes
2answers
287 views

What do you call a point-by-point (like Slack's) registration ui?

Slack has an effective registration that prompts the user for each data point on a different view. I've found the pattern is very nice in terms of reducing the user's cognitive load. I'm curious if ...
4
votes
5answers
721 views

Multi-selection experience

We have a form that allows a person to indicate a curriculum, level, subject and price, but we're trying to figure out the most intuitive way of doing it. There's a few challenges though: The ...
0
votes
0answers
66 views

Organized catalog of “big” UI patterns?

I need to make some fundamental GUI choices and would like this process to be more formal. E.g. how do I make a decision whether a details view should be a collapsible panel or a separate window? ...
0
votes
0answers
19 views

p2p web application, terms and icons to distinguish caller from callee?

I'm working on a web application which uses web rtc. Peers can connect to other peers. The interface will change quite a bit depending on who is the caller vs. callee. What are appropriate terms ...
10
votes
5answers
605 views

Tabs design pattern, solving for “N” tabs

I've seen many design patterns that help solve different content presentation issues by leveraging "tabs". Assuming I do want to display grouped content on a page (complex content or simple) and ...
1
vote
2answers
462 views

Separating actions on items from general actions in a toolbar

Rearranging an existing toolbar of ours, I would like to separate between types of action buttons. General actions that applies to the system, e.g. Settings, List actions that applies to the entire ...
11
votes
3answers
12k views

Table data in Mobile phones

I want to display a table with 4/5 columns and possibly 100 rows (as in desktop app right now) in smartphones. The table cells are also editable. Now we want to port this desktop app to smartphones ...
1
vote
3answers
139 views

What is the best UX for collecting a user's height in metric rather than imperial?

In Imperial, we normally collect feet and inches in separate fields, often via dropdown. In metric, what's the standard?
2
votes
2answers
14 views

Austosave causing clearing of input data [closed]

We have a web application that includes two internal tabs (within the webpage). One of which the user writes down comments, and the other where they only view content. There are times where they have ...
1
vote
1answer
191 views

Is it right to use desktop/laptop UX patterns for touch based devices?

I've noticed recently that we often use UI elements and UX patterns from desktop and laptop, which often stem from the primary input device being a mouse or physical keyboard. We then apply these to ...
4
votes
2answers
378 views

UI pattern: assign to list + details

assigning items to a list is well-known UI pattern and is already discussed at ux.se. Example: download bmml source – Wireframes created with Balsamiq Mockups The case I've stumbled on ...
12
votes
6answers
1k views

Is there a proper term for lists of removable tags?

I call them "tag blocks" but I don't think that's correct. The pattern is a block of textual information with the X to remove it. It can be seen in some places after adding a file to let you remove ...
5
votes
3answers
323 views

What's the name of this type of navigation?

I want to know whats the name of the navigation of these sites bellow: http://www.visitsuffolk.com http://www.ehow.com.br http://www.blogdoplaneta.com I searched for 'responsive grid', but its ...
0
votes
3answers
104 views

Fee quotation form just below the first fold. Are we losing orders?

Our site has a fee quotation form below the fold and we are concerned that we may be losing potential customers. What evidence is there that the "fold" is still a concern?
53
votes
12answers
4k views

Should read-only text appear as plain text or in a read-only textbox?

Should I use labels for read-only information, or should I use read-only text boxes to maintain the look of the fields? It seems to me that if something is in a textbox it implies there is some way ...
0
votes
1answer
55 views

Graphical Editor Patterns: Edit nodes a) inline b) with a dedicated edit view/dialog or c) a mixture of both

This question has been asked a few times but none that relate to a particular scenario: Graphical editors. I've noticed several different patterns, mainly Inline Edititng - Complex nodes have ...
38
votes
10answers
3k views

Have I missed anything from my list of web form best practices?

So I have been putting together a list of best practices to apply to forms recently and there is a lot of conflicting research out there. I have been combing everything from blogs through to HCI ...
1
vote
2answers
161 views

A higher order design language for UX [closed]

These days the digital design space doesn't just involve individual apps interacting with the user. A number of different technologies and trends has led to the prevalence of frameworks such as IFTTT ...
61
votes
12answers
9k views

Fibonacci pagination

Today I stumbled upon this pagination concept and I found it fascinating. It's actually an old shot but it made me think as I'll need to paginate some content in the near future. Pages will soon ...
0
votes
1answer
56 views

Guidelines for Title in Dialog Box / Headings

Consider a scenario where I have multiple operations (Add, Edit, Delete) on a Object (My Foo Object). Each of these operations when triggered by click of a corresponding action button, opens a dialog ...
0
votes
0answers
201 views

Best way to display date and time range in android listview

This is currently my screen. Is there a better way to display the date and time range within an android listview if you already have 3 lines on the left and only 2 lines on the right side.
0
votes
1answer
97 views

How can I simplify this task screen for mobiles [closed]

The Dropdown option are: All, Monthly, Weekly, Daily The second row shows the current date range. If you select weekly, it would show "7. Sep-13. Sep". You can swipe left or right to change the date ...
0
votes
2answers
47 views

Showing a lot more content within a model box

I'm working on a single landing page where content had to be shown in a model box. also this content has more content under it. but it's too much to show all together in one modal box i've to work ...
1
vote
6answers
153 views

circles that indicate the current image index

I just need to know what this is called: Let's say we have 5 images, then we have these 5 small circles beside each other above the loaded image and if we're showing the second image, the second ...