2

I've been exploring design trends that use various ways to lay out text data (i.e. an Email app, Search Results, Blog Posts, etc.), and so I'm curious if anyone has any ideas for new ways to display such information?

Off the top of my head I can think of two key layouts:

  • Lists: The most common way of displaying sections/results/posts, usually including a title and a small to large section of content text below it, with all items stacked on top of each other. Examples of this would be your common blog, a mail app, or even the this site's home page. This design, of course, has seen a multitude of variation, like titles-only lists, color blocking, thumbnail inclusion, and so on.

  • Grids: This design pattern has become more prevalent in the past few years, and with rapidly advancing web browsers has been easier to pull off. The idea is to display your sections/results/posts in [fixed or dynamic height] box forms, with anywhere between 2 and ∞ boxes per row. The table layout has been around forever, but has since been typically unfavored amongst designers who opt for more control over spacing, height, and flexibility. More recently Masonry designs have been used to create somewhat of an interlocking brick style layout for these boxes. Examples of Grid and Masonry layouts would be the WordPress Fresh page, Pinterest, and Dribbble. Additionally, Microsoft has made use of Swiss grid layouts with their Windows 8 "tiles".

My question to you: given that we've overused lists and grids, can you think of any new way to display text results/posts/sections in a user-friendly and intuitive way?

Improve this question

1 Answer 1

Reset to default
2

This has its basis in some kind illustration. What I mean is illustration, as not the same thing as design. It could also include purely text based solutions but with a visual sorting based on illustrative principles. Tag-clouds would be an example. To quote the tag here at GD (confess, I wrote it myself):

Illustration is about communicating a specific contextualised message to an audience. It is rooted in an objective need to fulfil a particular task. It is often confused with other disciplines most notably that of graphic design and fine art, perhaps because there is sometimes an overlap. Illustrators need to have knowledge, understanding and insight regarding the context within which they are working, the subject matter, and work within the parameters and needs of the target audience.

Going outside the classic list and grid, what you are looking at, is ways to browse information and data (note that information and data are two different things.).

Illustrations in its widest sense means the use of visual tools to enhance a message, a piece of communication, complex and massive amounts of data and relationships; and ways of browsing information. Maybe also exploring new connections and relationships between entities. It does not mean "pretty colours" or arty solutions.

Examples of (possibly) helpful, interesting sorting of information that might enhance understanding and curiosity:

Maps, scatters charts, bar charts, columns, geographic metaphors, tag-clouds, treemaps, gauges, bubbles, timelines, drawings, time-space visuals are all examples of visualising. You point out Jquery Masonry, which is an example that is sometimes useful and easily understood. All of these can contain text, and some can contain large amounts with ease. The Stack Exchange itself, with the explore our sites is basically a text-based, weighted browser (with "weighted" I mean variation of size, colour or such that indicates "mass", size, popularity etc.).

Having said that, you will find annoying misuse of visuals that adds nothing to and does not aid the content. There is a reason for the fact that most online newspapers sort of look like paper-newspapers.

For basic information retrieval, there are (very basically) three ways of looking at it:

  • "Need to know": The guiding, step-by-step information dissemination. A highly controlled hierarchy of information, basis in presumptions of what the user wants and needs. In a way, you could say newspapers do this; with headings, ingress, and main text, and books with subsequent pages.
  • The "phonebook". You know what you are looking for, and are very spesific. Words, sorting by time, place, etc.
  • Exploration of information, data and content. Some level of happenstance; the user will dilly-dally around, exploring and following unexpected paths. Very hard to create, often satisfying to play with, and always with a more hierarchical alternative.

It is sometimes a question of teaching the audience a new way of seeing. I am all for it, as long as it adds value. This of course gets you into the minefield of information architecture... and that is a massive discipline in itself.

Further reading: Edward Tufte

Improve this answer
2
  • Wow, that's a great answer, and gives me a lot to think about. Much appreciated!
    – Jody Heavener
    Dec 26, 2013 at 15:51
  • Thanks, glad you liked it. Had a feeling I was rambling a bit outside of the main concern.
    – benteh
    Dec 26, 2013 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.