(From uie.com’s All You Can Learn subscription video series, link here)
UX practitioners have spent the last several years refining responsive design for consumer sites and some standard elements have emerged:
Enterprise apps, however, often remain mired in the suffer-the-small-screens mode, where elements are jammed together and not really usable without lots of pinching and zooming etc:
But how do we get very complicated enterprise desktop apps onto mobile devices?
Enterprise apps have their own set of (generally more complicated) components:
Strategies for getting tabular data on small screens
A common screen in enterprise desktop sites:
Desktop tables are great for scanning quickly, seeing trends, sorting and filtering large data sets. But how to accomplish this on a small screen?
On method is to re-prioritize the information to show only a few main data points, with accordions etc revealing the rest. Here is a sample from my work at Guardian Life Insurance:
In the example above, I also moved the attribute values from the top to below below the account types so each data point stacked on its own line (my data was too wide to fit in a 2-col format but use one if you can)
- It’s vital here to really pay attention to progressively showing the most important info first, hopefully determined in part through user interviews!
- Also vital is typography—varying type size and color to create hierarchies
Or reformat the table into pie charts
Factors to keep in mind:
Strategies for Managing Users pages
Hagan shows a responsive pattern for these types of common page structures:
However, user research revealed a problem with the sample above (too bad they didn’t do the research prior to wire framing!):
So the design required re-architecting info to match users’ actual needs
- And really, are the secondary functions even necessary? Do you really have the dev time to build a feature expecting just 5% of folks to use it? If so, it’s nice to be well staffed!!
The updated design:
The red icon nicely gives a quick visual on what accounts are locked
The mobile design was also caused rethinking of the desktop site, since the patten to unlock was much shorter and easier to perform:
Some more things to focus on:
Consider the 27 inch monitor—usually sites put channels of white on the sides to fill up the real estate:
An example from HomeAway:
To take advantage of the 27-inch screen, Hagan rethought the architecture into categories like this:
I disagree here with Hagan. I find websites using the full 27-inch width difficult to use:
- It’s harder to understand at a glance what is being shown, since the canvas is so wide you can’t take it all in at a single glance
- As you focus on one area, you have to ignore the other areas—there’s A LOT of cognitive load going on in this design
- I think a new/casual visitor to this site would find this totally overwhelming and unfocused and would probably move on to another site. Very unclear to me what the organizing principle to this screen is as a user unfamiliar with its contents
- Even Hagan’s mockup of the structural components fails to me—I think this information density is far too complicated and dense for a new or casual user. It seems focused on the designer (look what all I fit on the screen!) and not the user (Yikes, what is all this stuff? How long will it take me to figure where the information I am interested in is located in this complex structure?):
To be fair, maybe I am wrong here—some quick testing could validate which direction is right for your site
Thinking about the big screens can be helpful:
Hagan’s summary:
About Hagan Rivers (from LinkedIn): I love to find elegant, easy to use, and beautiful solutions to design problems. I have been designing user interfaces for software since 1989. There are very few people in this industry with the amount of experience I can bring to the table on interaction design and user interface design. As a consultant, I provided my clients with design leadership, strategy and planning. As an interaction designer, I have worked on everything from requirements development to wire framing, site maps, application maps, information architecture, navigation systems, UI specifications, and prototyping. As a researcher, I have worked on usability studies, field studies, and persona development. As a visual designer, I have acted as lead for talented visual designers, providing design direction, incorporating branding, developing information visualizations, writing style guides and pattern libraries. My work requires strong communication skills: I run design reviews, brainstorming sessions, workshops, seminars, and write and speak. I have, in my career, worked with dozens of tools over decades of work. I can learn any software tool in a week. I can master any tool in a month.
