Questions tagged [layout]
The way in which the elements of an interface are laid out.
907 questions
5
votes
3
answers
757
views
How should I present landscape-orientation page thumbnails in a series of portrait-orientation thumbnails?
I am working on a small web site which has traditionally presented small (300 x 388)px thumbnails of their event posters, which are linked to the full, tagged PDF.
The majority of their posters are ...
5
votes
5
answers
972
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 ...
5
votes
3
answers
980
views
How can I show that data in a table is related to other data within the same table?
I have a table where every 6 entries of the data are loosely related. How can I show that these sections of data are related without adding a separate column explicitly saying so?
I've tried to ...
5
votes
4
answers
459
views
Which of the following options best draws attention to the "buy tickets" action without detracting from the surrounding visual hierarchy?
I'm working on touching up (as much as I'm allowed) some of the design elements for a website. One client requirement is to draw more attention to the "buy tickets" link as this action is one that ...
5
votes
4
answers
690
views
Navigation with or without sub-navigation?
Considering following site architecture, where each category has multiple products inside it:
/Home
/About
/Products/Category 1
/Products/Category 2
/Products/Category 3
/Products/Category 4
/...
5
votes
3
answers
899
views
best way to represent horizontal reports?
i need to display reports with various fields, column wise. The length of each column could go along 50px appx. So , the overall report length would go upto 2k-3k px , since i need to display them in ...
5
votes
8
answers
3k
views
Best way to fit a lot of stuff onto one page [closed]
I have created a webpage, but my boss came back saying that the page is too busy. I was just wanting some ideas of how to split up the page e.g. accordion, tabs etc. What tactics have you implemented ...
5
votes
3
answers
3k
views
large amount of data on a single page
I'm a member of a team developing a business application. Basically - it is all about data entry. There are people (thousands of them) sitting whole day and filling the form below over and over in ...
5
votes
5
answers
2k
views
Search box in header or body?
I am designing recruitment sire where focus is not to search job but to write resume .As I know focus is on resume writing service , I have option to place job search box in header or down after ...
5
votes
4
answers
214
views
Should certain functions be "hard to find" for powerusers to discover?
This is more of a fundamental question about access to the "poweruser" features for an application.
One side thinks that power features should be more or less, "tough to find" and leaves the curious ...
5
votes
3
answers
4k
views
Pull-to-refresh and search bar
I have an iOS app that uses tables views. It also implements a pull-to-refresh model, which works very nicely. I now want to add the option to search that table view. Normally, I would just hide the ...
5
votes
4
answers
1k
views
how to make compact UI for lists
I'm making an app with 2 lists in the main screen, and the space allocated for the 2 lists are equal. So there will be only 5 items visible for each list.
I'm thinking of an improvement on making ...
5
votes
2
answers
229
views
Alternative to large selection of check boxes on profile page
We are currently re-working our profile pages in our software and would like to explore the alternatives of having a large amount of tick boxes for users to select to attain certain privileges.
The ...
5
votes
3
answers
692
views
Login Form Placement/Isolation
If you go to http://www.notableapp.com/, you will see that when you click the Sign In button, it takes you to a completely new page with only the login form on that page.
Why did the designers ...
5
votes
2
answers
273
views
What's the best way to design the web interface which runs the same on almost all resolutions?
With web pages, what's the CSS framework or any other idea, which may show the web pages the same way on almost all screen resolution using div?
5
votes
1
answer
176
views
Should both bold and italics be allowed in electronic flashcards?
When people create electronic flashcards, is there a valid need for them to have markdown for both bold and italics? This is a question that I have been debating with some colleagues for a while now ...
5
votes
1
answer
199
views
What is the optimal layout for a form with two respondents?
download bmml source – Wireframes created with Balsamiq Mockups
I'm redesigning a form that is used by office workers who interview respondents in person. In some cases, there will be two ...
5
votes
1
answer
2k
views
Flow of Dynamic Grid
There's a recent trend in web design to use dynamic masonry grids, like Pinterest, for just about everything these days. If you haven't seen such a layout before, it presents content of variable ...
5
votes
4
answers
518
views
Should Website "Container" elements reach the bottom of the screen?
I've got a fixed width layout site much like SE and Twitter and it personally bugs me when my "short" pages don't reach the bottom of the page. I've been wondering if this is a purely stylistic issue ...
5
votes
4
answers
2k
views
I'm looking for good examples of Welcome pages, and any good theory on how to go about it [closed]
Kind of a discussion based question, but bare with me anyway.
I am working on a web app that provides reporting. It makes reporting fun, honest!
I am struggling to design the Welcome page. It's a ...
5
votes
1
answer
1k
views
How to display a grid of images that have different aspect ratios? [duplicate]
If I have a grid of images, let's say political cartoons, that have differing aspect ratios and cannot be cropped, how can I display them in a grid or even linear fashion?
This is for a newspaper ...
5
votes
5
answers
496
views
Scaling an Address Form on Resize
My application has a form for filling in the names and addresses of a donor. Each donor gets a closable tab and each tab has an address form.
The problem is that the application runs in a regular ...
5
votes
2
answers
352
views
Where can I find research on readability of web sites?
I am looking specifically for text alignment (e.g. left vs. full justification) and what size/width text sections ideally have.
5
votes
1
answer
349
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
2
answers
430
views
What should you consider when prioritizing information and features across screens on a product?
Based on solutions and ideas from "Can you make it more prominent?" stakeholder phenomenon I decided to list out and prioritize each of the features on each screen in the product.
Turned ...
5
votes
3
answers
2k
views
How to add dependencies between tasks in a list
I have a list of tasks that can be dependent on each other, e.g. task #2 cannot be begun until task #1 has completed.
In schematics, it might look like this
Id | Dependency
----+-----------
#1 | -...
5
votes
3
answers
3k
views
Are there any recommendations for the layout of Metro forms UI with hierarchical data on a website?
Most of the guidelines I find regarding Metro design deal with read-only or media content with few text input controls. Are there any design guidelines/examples/screenshots showing good layout of ...
5
votes
1
answer
162
views
Is it necessary to reorganize your entire layout to suit multilingual left-to-right languages?
I'm working on a flash project right now that is necessary to support 16 languages, from english to hebrew, and etc... My dilemma right now is whether or not it is necessary to flip my whole design to ...
5
votes
3
answers
2k
views
What's the best way to display and navigate about a list of 2000+ items?
I've recently decided to update the look of a site and was confronted with a page that is a list of 2,000+ items sorted into a table and a blob of links that go with it.
First Robotics competition ...
5
votes
1
answer
423
views
Best way to handle a system failure (not the user's fault)
In my application, we're very dependent on a service to provide some information that the user can interact with. It's possible that the service could be down, or in some invalid state to where any ...
5
votes
6
answers
724
views
Layout suggestions for social media sharing page
I need to make a "Share This Site" page that offer all the regular social sharing mediums and send to a friend email option.
With
Facebook like
facebook share
ReTweet this
Digg
Buzz
delicious
email
...
5
votes
2
answers
516
views
Criteria for a valid sticky top bar
I see lot of websites that has design responsive for all devices, with css styling that as a user [, designer, and developer] can say that put effort upon. They use a banner/header/menubar on the ...
5
votes
2
answers
306
views
How to make a application with several different user controls feel more unified?
We have an application where we're combining several different user controls into one main window. About 3 of the controls are developed outside our group, so we really don't have much control over ...
5
votes
1
answer
314
views
Should my gutter/margins expand in a fluid design?
I'm redesigning a page, and am going for a fairly basic fluid, 2-column layout. With a fluid layout though, should I have my gutter and margins expand along with the columns, or would it be better to ...
5
votes
4
answers
5k
views
Designing an Advanced Search Control for iOS?
I'm working on iOS app and part of what I'm making is an advanced search interface. The default iOS search components allow for text entry and for a "scope bar". That is, a bar which allows you to ...
5
votes
1
answer
633
views
Best way to tell user either to select an existing entry or enter new entry
I am designing a web page for mobile devices as I have limited screen space.
The web page is used to select a store name from a list of stores (which the user entered earlier) or enters a new store ...
5
votes
2
answers
669
views
Best layout for lots of user input elements?
I have an application that presents a question/answer form to the user. It was mandated that the form look as close to the paper form as possible. The paper form was built in a spreadsheet as two ...
5
votes
5
answers
1k
views
How to layout / structure a page with a long sidebar but a short content section?
Basically, I have a data table in the main content area and a filter section on the sidebar. The filter on the left serves as a filter for the data that would appear in the data table.
Now, each of ...
5
votes
3
answers
1k
views
Should byline be above or below image?
A client of mine is a large newspaper and they are now doing some changes to their article template.
One of the things they want to change is the byline so that it doesn't take up to much space. ...
5
votes
2
answers
388
views
Flashcard app - list or boxes?
I am making a flashcard webapp, and am deciding between using lists or boxes to represent the decks and cards. i.e.,
Lists
Boxes (with create new deck/card box at the end)
So far, my points are as ...
5
votes
6
answers
2k
views
Enforce or assume an orientation for the layout of a mobile web application
When designing a mobile layout in a web application, is it fine to assume a given orientation (horizontal or vertical) or to ask to the user to adopt a specific orientation?
I have seen several ...
5
votes
1
answer
1k
views
Fixed form button bars
Recently I've been designing complex multi-page forms for financial institutions and up until now they've been designed with a fixed navigation bar at the bottom of the screen, like so:
The forms are ...
5
votes
2
answers
812
views
How to calculate the best width of a text element
I am developing a visual editor where the nodes in the editor can contain text. The size of the text can vary, and can contain any character. Since it is important for me to minimize the size of the ...
5
votes
1
answer
6k
views
Using JQuery DataTables to display many columns
We have a large document archive. It is built similarly to how a Cassandra Database would store items having column names and column values stored for each item.
This can lead to having way to many ...
5
votes
3
answers
2k
views
How can I incorporate IAB advertising banner standards in a 960 grid layout?
When I try to prototype a website thinking in the IAB display advertising guidelines using a grid system (960gs - 10-60-10) the only banner that fits in a 3 column space it's the half banner (300x250) ...
5
votes
3
answers
1k
views
Handling images larger than viewport in carousel-based gallery
I'm trying to figure out the best way to design an image gallery embedded in a lightbox. The gallery has thumbnail versions of each image in a carousel, and clicking a thumbnail brings that image ...
5
votes
2
answers
598
views
Mobile UX - Using tabs and bottom navigation
I am trying to find information regarding using tabs when combined with a bottom nav bar. The benefit of the bottom nav bar is that it allows the user to quickly switch between different sections of ...
5
votes
1
answer
157
views
How can I manage a module creation screen with multiple lists of templates selections
Specification:
The aim of the design below is to create one module by using 3 set of templates.
Each template is having list of templates which are coming from different database tables.
Template set ...
5
votes
2
answers
589
views
Drag & Drop feature for customizing UI on modern web applications
Many web applications that allow you to design website have drag & drop features that allow you to rearrange the layout as most of the components are modular. There are also many web applications ...
5
votes
2
answers
2k
views
UX/UI Responsive - Long forms with multiple language content
I want to know the preferred (and why it is good/bad) way to show a long form with multiple sections, which have content that should be in multiple languages (if multiple language is supported)
The ...