uio content simplification

Vass, Joanna jvass at ocadu.ca
Wed Apr 24 16:53:51 EDT 2013



Hi All,

Yesterday we discussed two options for simplifying content presentation on UI Options. The two deal with content very differently and represent different user needs. Below is an explanation of some of the pros and cons of each to help determine which would be best the best form of content simplification or if we should approach it differently.


Option 1: Responsive Layout Slider (mock-up<http://wiki.fluidproject.org/download/attachments/32014373/uio_simplify1.jpg>)

Takes advantage of a website's mobile and lower width layout versions. Mobile website version are often organized to provide users with prioritized and linearized content to fit on a small screen for a quick on-the-go experience. Typically, the layout is organized with the most important content above the fold and interactables are emphasized with a larger touch-screen target. These features may also be useful for a user that always needs a clear display of all the content in order of priority. Ideally, the mobile version of the website would not require the user to skim through multiple columns in order to determine the reading order of a page. Other possible benefits include more negative space, shorter line lengths, and more distinction between content and interactables. Potential problems include providing the user with navigation that has been optimized for a touchscreen (e.g., a drop-down to replace the main menu or gesture reliant interaction) and limiting the user to the content available (depending if the implementer has decided for different mobile-only content).

Roughly there are two approaches in creating a mobile sites: 1) a separate mobile site, that may have a completely different appearance and function from the desktop site or 2) a responsive website, that generally reorganizes the same content to better fit a variety of browser widths. Linked is an article outlining some of the advantages and disadvantages to each approach<http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/>.

This simplify option would best work with a responsive website approach, where the user would still be presented the same content but optimized to fit under less columns. However, a mobile only site still has it's benefits as it removes less important content.

There are a couple of approaches we can take to simplifying using lower width layout versions. 1) A slider that uses the current website width as a minimum and smoothly decreases the width of the content. The width the user requests is treated as a maximum, if the browser is scaled smaller than that, the width would further decrease. 2) The sliders default position is based on the current browser width, the user can then request more complexity or more simplicity. 3) An on/off switch between the current width of the content or the lowest width.


Option 2: Article/Important Content Only (mock-up<http://wiki.fluidproject.org/download/attachments/32014373/uio_simplify2.jpg>)

Clears all interface elements except the main content. Removes possible distractions, deters exploring other content, and encourages the user to focus on one thing (similar to Readability<http://www.readability.com>). The rest of the website is navigable only through an expandable/collapsable 'Table of Contents' that acts as a site map for the whole website. The visible content would be the articles on the page or content determined by the implementer. This content would also be displayed in a linear form (e.g., article images that are in side columns would be positioned in between the text column). Generally only content unique to the page would be visible. Navigation menus, footers, side bars, etc. would be hidden. As a result, the website hierarchy and structure should be clearly revealed in the 'Table of Contents' since it becomes the only consistent way to access other parts of the site. Potential problems may arise with websites with more complex structures that would be difficult to communicate with just one navigational piece.


Overall, the first option aims to provide the user with a linear presentation of all the content from the most important to the least and the second option goes a step further and omits non-essential content. The first option is intended for users that need a prioritized list of information and features and the second for users that need to focus on one thing at a time with minimal distractions.

As these options reflect different use cases, maybe we should offer them as two levels of simplifying content presentation? On the first level all the content is linearized and on the second all distractions are removed, moving the navigation to a 'Table of Contents'.

Thoughts?

Thanks!
Joanna







-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20130424/f578ae17/attachment.html>


More information about the fluid-work mailing list