UI Design - Organizing the page
- 1. Prepared byVinodWilson – Architect – Crestron Electronics
- 2. This section discusses several elements of page layout: Visual hierarchy, Visual flow, and how to use dynamic displays.
- 3. The concept of visual hierarchy plays a part in all forms of graphic design. Put simply, the most important content should stand out the most, and the least important should stand out the least. Also, titles ought to look like titles, subtitles ought to look like subtitles lists ought to look like lists
- 4. What is the most important thing on the page you’re designing? Make that the center of attention. Can you rank other things in declining order of importance?Arrange them on the page in ways that draw progressively less attention; make them look less interesting.
- 6. Density A dense, heavy-looking block has stronger contrast with the surrounding page; an open look has less contrast Background color Contrast draws attention. Black on white, or vice versa, is the strongest contrast possible. Position and size A medium or large text block, roughly in the center of the page, calls attention to itself as the primary content (like an article or blog post). But a small strip of text at the bottom of the page says quietly, “I’m just a footer” and begs to be ignored!
- 7. Rhythm Lists, grids, alternating elements such as headlines and summaries, and whitespace separation can create a strong visual rhythm that irresistibly draws the eye.
- 14. Containment
- 15. Visual flow deals with the tracks that readers’ eyes tend to follow as they scan the page.
- 17. Put calls to action after the text you want viewers to read first.
- 20. Visual Framework Center Stage Grid of Equals Titled Sections ModuleTabs Accordion Collapsible Panels Movable Panels
- 22. What Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content. Use when You’re building a website with multiple pages, or a UI with multiple windows—in other words, almost any complex software. You want it to “hang together” and look like one thing, deliberately designed; you want it to be easy to use and navigate.
- 23. Why When a UI uses consistent color, font, and layout, and when titles and navigational aids—signposts—are in the same place every time, users know where they are and where to find things. They don’t have to figure out a new layout each time they switch context from one page or window to another. Have you ever seen a book in which the page numbers and headings were in a different place on each page?
- 24. A strong visual framework, repeated on each page, helps the page content stand out more. How Draw up an overall look-and-feel that will be shared among all pages or windows. Home pages and main windows are “special” and are usually laid out differently from inner pages, but they should still share certain characteristics with the rest of the site.
- 27. What Put the most important part of the UI into the largest subsection of the page or window; cluster secondary tools and content around it in smaller panels. Use when The page’s primary job is to show a single unit of coherent information to the user, let him edit a document, or enable him to perform a certain task. Other content and functions are secondary to this one. Many types of interfaces can use a Center Stage tables and spreadsheets, forms, and graphical editors all qualify. So do web pages that show single articles, images, or features.
- 30. What Arrange content items in a grid or matrix. Each item should follow a common template, and each item’s visual weight should be similar. Link to jump pages as necessary. Use when The page contains many content items that have similar style and importance, such as news articles, blog posts, products, or subject areas.You want to present the viewer with rich opportunities to preview and select these items
- 35. What Define separate sections of content by giving each one a visually strong title, separating the sections visually, and arranging them on the page Use when You have a lot of content to show, but you want to make the page easy to scan and understand, with everything visible.You can group the content into thematic or task-based sections that make sense to the user.
- 39. What Put modules of content into a small tabbed area so that only one module is visible at a time.The user clicks on tabs to bring different modules to the top. Use when You have a lot of heterogeneous content to show on the page, possibly including text blocks, lists, buttons, form controls, or images.
- 40. Some of the page content comes in groups or modules (or can be sorted into coherent groups). Those modules have the following characteristics: Users only need to see one module at a time. They are of similar length and height. There aren’t many modules—fewer than 10, and preferably a small handful. The set of modules is fairly static; new pages won’t be added frequently, nor will existing pages be changed or removed frequently. The modules’ contents may be related or similar to each other.
- 44. What Put secondary or optional material into panels that can be opened and closed by the user. Use when You have a lot of heterogeneous content to show on the page, possibly including text blocks, lists, buttons, form controls, or images.You don’t have room for everything.You might, however, have Center Stage content that needs to take visual priority
- 45. Some of the page content comes in groups or modules (or can be sorted into coherent groups).Those modules have the following characteristics: Their content annotates, modifies, explains, or otherwise supports the content in the main part of the page. The modules may not be important enough for any of them to be open by default.
- 46. Their value may vary a lot from user to user. Some will really want to see a particular module, and others won’t care about it at all. Even for one user, a module may be useful sometimes, but not other times.When it’s not open, its space is better used by the page’s main content. Users may want to open more than one module at the same time. The modules have very little to do with each other. When ModuleTabs or Accordion are used, they group modules together, implying that they are somehow related; Collapsible Panels do not group them.
- 50. What Put modules of content into boxes that can be opened and closed independently of each other.Arrange the boxes freely on the page, and let the user move them around into a custom configuration. Use when You’re designing either a desktop application, or a website that most users sign in to. News portals, Dashboard, and Canvas Plus Palette apps often use Movable Panels. You want users to feel a sense of ownership of the software, or at least have fun playing with it The page in question is a major part of the app or site—something that users see often or for long periods of time. You have a lot of heterogeneous content to show on the page, possibly including text blocks, lists, buttons, form controls, or images. You don’t have room for everything
- 51. Some of the page content comes in groups or modules (or can be sorted into coherent groups). Those modules have some of the following characteristics: Users will almost certainly want to see more than one module at a time Their value may vary a lot from user to user. Some people want modulesA, B, and C, while others don’t need those at all and only want to see D, E, and F. The modules vary a lot in size.
- 52. There are many modules—possibly so many that if all were shown at once, a viewer would be overwhelmed. Either you or the user should pick and choose among them. You’re willing to let users hide some modules from view altogether (and offer a mechanism to bring them back). The modules may be part of a tool palette or some other coherent system of interactive elements
- 59. What Starting with a very minimal UI, guide a user through a series of steps by showing more of the UI as he completes each step Use when ▪ The user should be walked through a complex task step by step, perhaps because the task is novel, rarely done, or outside the user’s domain knowledge. ▪ But you don’t want to force the user to go page by page at each step—you’d rather keep the whole interface on one single page ▪ Alternatively, the task may be branched, with different types of information required “downstream” depending on a user’s earlier choices.
- 62. What Starting with a UI that is mostly disabled, guide a user through a series of steps by enabling more of the UI as each step is done. Use when The user should be walked through a complex task step by step, perhaps because the user is computer-naive or because the task is rarely done (as in aWizard). But you don’t want to force the user to go page by page at each step—you’d like to keep the whole interface on one page. Furthermore, you want to keep the interface stable; you’d rather not dynamically reconfigure the page at each step, as you would with Responsive Disclosure
- 64. What As the user resizes the window, resize the page contents along with it so that the page is constantly “filled.”