Tweet

By Dennis D. McDonald, Ph.D. 

Graphics and Landing Pages

Click or tap image to download a .pdf of this article.In my consulting business, whether I’m researching, working, or selling, I’ve seen a lot of landing pages on the web over the years. Website design fashions come and go, especially for home pages and landing pages. There’s much more emphasis now on graphics with more attention being paid to attractive designs that work well on full size as well as smaller displays such as tablets and smartphones. The influences of services such as Pinterest and Flipboard are being felt.

As I’ve remarked elsewhere I sometime prefer the mobile to the “full size” web page. Mobile-optimized web sites just seem less cluttered and easier to navigate.

One thing I am seeing more of is the use of colored blocks or tiles with links instead of the more traditional pull-down menus or  lists of links. Perhaps this is related to the Windows 8 desktop design. Whatever the reason for this  trend, I wonder how adaptable such an approach will be for helping users interface with data files instead of “traditional” text oriented pages and database records?

An Example

The Verge is an interesting example. On the full size landing page, look at how, via your desktop or laptop computer, the tiles and links spread up-and-down and how a mix of solid colors and rectangle sizes demarcates the tiles. When the same page is viewed on a smartphone, the same blocks or tiles are arranged on a horizontal band that can be easily swiped left or right by hand.

Looking at a page like that on the computer screen with the tiles displayed together as a solid rectangle, you have to move your eyes around a bit to see the options.

One thing that jumps out at me is that, at least with The Verge, there doesn’t immediately seem to be a grouping of the different links when this approach is used. The different blocks or tiles vary in size, color, and displayed graphics and seem to be arranged in an almost random fashion.

Adapting for Touchscreens

That’s okay when there aren’t that many tiles or when you care more about what is “above the fold” on your screen, as is the case with news-oriented sites.  But what happens when you’re navigating via a smartphone or tablet? Your experience will then depend on whether the site is adapting its display to the delivery device, as is the case with The Verge and other sites that employ the “tiles” metaphor. Some sites maintain the tile approach when a mobile device is detected, some rearrange the tiles automatically, and others switch to a swipeable vertical or horizontal string of blocks that can be rapidly traversed.

The saving grace for moving away from the drop-down lists or more traditional menu items and tabs is that it’s so easy to swipe left and right and up-and-down touch enabled devices. Windows 8 is counting on adoption of this display and navigation metaphor big time, but the jury is still out as to how long such adoption might take.

There is Still a Need for Organization

Whether a graphics oriented or text oriented approach is used on the landing page, what’s important to me as a sense of order and organization. When I “land” on a site I want to be able to grasp quickly how things are organized so I can quickly navigate to or search for what I’m there for. As always, a nice prominent search box is good to have so you can cut through everything quickly.

So what, you may ask? Isn’t it true that, nine times out of 10, where you go from an artistically rendered landing page is to a more traditionally displayed multi-column page displaying text and embedded links? Even if you update your landing page with a more up-to-date tile-and-graphics oriented architecture, aren’t you’re still stuck with legacy pages layouts that have to be reformatted or shoe horned to make them displayable on smaller touchscreens?

How you answer such questions will depend on the site. As suggested above, if your site is news oriented with constantly changing entries on the front page you may be able to get away with a low-link-density graphics oriented landing page. 

Adapting for Data Files

What if you are emphasizing access to data files?

Where the more structured “tiled” approach may break down is the increasing importance of accessing data files, not pages, images, or text. Tools from companies sometimes referred to as “data markets” are already commoditizing the ability to organize and expose numeric data files. Typical capabilities of such services include not only file downloading (in a variety of formats) but also data filtering, data manipulation, and data visualization. Such approaches are already being employed by local governments for applications ranging from crime reports to mass transit performance to fire reports.

Making online interactions with datafiles more visual also becomes a challenge if you have to go beyond the basics of pie and bar charts, scatter diagrams, trend lines, and geographic map overlays. The ability to integrate such visual metaphors into the user interface by which data are selected and manipulated has the potential for revolutionizing how we interact with data sources online. As a number cruncher from way back — I used to design and run statistical sample surveys for a living — this for me is definitely an exciting prospect.

If it isn’t handled correctly, though, making a lot of data available online also has the potential for the opposite outcome: confusion, especially for users with less statistical or analytical experience.

Improving Access to Government Generated Data Files

As it becomes more common (and legally required) for government-generated data files  to be made available online, we need to avoid a surge in websites “dumping” multitudes of links to data files on landing pages without needed documentation, descriptive metadata, APIs, and support. Agencies providing access to data, whether historic or based on realtime feeds from live systems, must ensure a level of support commensurate with the policies, goals, and objectives of the programs that generated the data. In situations where data are being made available for the first time, this will take  planning — and resources.

What are the “Use Cases”?

 Assuming data access now becomes a regular responsibility of government programs, we also need to understand how we match the data with the task at hand. Just making individual data files more accessible via improved data granularity or aggregation may not be sufficient. How the user interacts with the data in light of what the user needs the data for is where we also need to pay attention. 

At a basic level we need to understand the different “use cases” the data must address and how much responsibility we place on the user and how much on the system and its automated tools. 

Making files available for downloading is a relatively simple use case if “clean” data are already available and documented. Commercial services such as the above referenced “data markets” are already providing such services.

A more complex use case might be provision of APIs and human support to enable filtering, sorting, and displaying structured and unstructured data from multiple source files to help answer complex questions. Such a use case may require more customized or dedicated support than a government agency is able or willing to provide on its own without explicit authorization and funding.

Conclusion

Our ability to store and provide access to vast amounts of information is growing. We need to focus on how such information is to be used most efficiently and most effectively.

At the same time, through careful planning and design we must avoid the expense of developing and supporting systems and websites that people do not or cannot use. In these times of fiscal austerity such an outcome would be inexcusable.

Copyright (c) 2013 by Dennis D. McDonald, Ph.D. Dennis is a Washington DC area consultant specializing in collaborative project management and new technology adoption. His clients have included the US Department of Veterans Affairs, the US Environmental Protection Agency, Jive Software, the National Library of Medicine, the National Academy of Engineering, Social Media Today and Oracle, and the World Bank Group. His experience includes the management of projects involving the conversion or migration of financial and transaction data associated with large and small systems. Contact Dennis via email at ddmcd@yahoo.com or by phone at 703-402-7382.