Perry

Hewitt

Tag: design

  • 5 ways to make your admin interface shine

    5 ways to make your admin interface shine

    Your design meeting for the new website was standing room only. People who routinely wear mismatched socks showed up to express strong opinions on color hue, saturation, and value, and to weigh in on flat vs. skeuomorphic design. A public website for the enterprise is important — it’s a brand statement seen millions of times each month. So while it’s not surprising that these meetings garner internal attention, it’s unfortunate how little mindshare is paid to its less sexy alter ego, the admin interface.

    Chicago Tribune kittens
    Chicago Tribune taken over by kittens – was the admin interface to blame?

    The admin interface is the dashboard view for the internal users managing your site through a content management system (CMS). A fair amount of your website may be automated through feeds or ad servers, but odds are you still have a team to edit/add content or choose what to feature on the homepage. Spending the time to make this dashboard a user-friendly control center instead of a jargon-filled, out-of-the box system can improve productivity and reduce errors.

    1. Start by giving your developers a clear idea of how site admins will manage site content. Who writes/curates the content? What’s the process for inputting the content, and for any proofing and approval? How often does existing content get updated, and how much new content comes in each day? How many site admins need different levels of access? The bottom line is that the technology must support human users, and not the other way around. An out-of-the-box system can adequately handle 90% of the use cases. But considering the amount of time your site managers spend each day inside the admin interface, small improvements can add up to big value.
    2. Volume matters. Make sure to test each aspect of the interface with the right amount of content. For each entry, make sure heads, subheads, and copy lengths approximate or are real ones. (For fun: read a good attack and defense of Lorem ipsum) Once you’ve populated the system with hundreds or even thousands of content items, is it still possible to quickly find a specific article or multimedia asset for an edit?
    3. Disable unnecessary features. Most CMS systems serve general audiences, and offer features and links you may never use. Developers are often loath to remove features because they may someday be useful. It’s important to push for showing only what is needed. Removing unnecessary options will make daily functions easier to find, and accelerate task completion.
    4. Enable workflow, but also workarounds. Enforce data validation, but be careful not to create processes so cumbersome that they slow down content entry. The workflow needs to be painless enough to ensure its adoption, and anticipate common use cases. But recognize that you can’t design for every content and staffing scenario, so leave some flexibility in the system. Examples might include a “nuke” button for a social media feed, or a way to override approvals for certain content types.
    5. Add your brand to the admin interface. This interface is the home screen of the people who work in it. As much as is practical, make sure your organizational and site identities are reflected. The latter is particularly useful in seeing at a glance one site’s admin interface from another in organizations where admins may manage multiple sites.

    Internal, task-oriented admin interfaces will never be the rockstars that public website designs are, but an infrequently updated site can often be tied directly to how damn hard it is to add or change content. Investing time in thinking through and designing a usable admin interface does more than make your internal users happy — it’s a strong predictor of a well-maintained public website.

  • The science of website design

    The science of website design

    Few would dispute that website design is a creative exercise. A recent study by Katharina Reinecke and colleagues [PDF] would imply that there’s some interesting, quantifiable science baked in as well. Both common sense and studies confirm that users judge a site’s appeal within seconds. Reinecke et al. offer some compelling findings on how visual complexity and colorfulness play into that initial judgement.

    The researchers found visual complexity to be a significant factor in initial appeal. Low-to-medium complexity in the visual design translated into more positive initial impression. Apparently, preference for low visual complexity is notable for viewers over the age of 45. (Anecdotally, I’ve observed this as a similar cutoff age for tolerance of an endless scroll.)

    color wheelThe study also analyzed reactions to colorfulness, measured in part by distribution of colors in an image and composition of adjacent colors (the complementary colors effect). Overall, colorfulness was found to be a less important driver of visual appeal at first impression.

    The researchers also captured and analyzed demographic data. Findings included that while age correlated with preference for low-medium visual complexity, education level interacted more significantly with colorfulness. Gender did not play a major role in either visual complexity or colorfulness, and the study indicated that further research is required to better understand the role of native language and aesthetic rating.

    The process of creating website design remains highly creative and subjective. Great design, to a degree, follows Justice Stewart’s dictum: “I know it when I see it.” But the more we can understand and quantify the specific elements that form an initial and lasting impression, the better user experience we can create.

    Photo credit: Victor Hertz

  • How to manage deceptive online reviews

    How to manage deceptive online reviews

    reviewVia Bits Blog, an academic study on deceptive reviews explores why web reviewers make up bad things. It turns out that false negative reviews are not written predominantly by competitors or disgruntled employees. These reviewers are often loyal customers who have made multiple purchases from the company — just not the product in question. Customers writing false reviews may be upset about a different transaction, see themselves as “self-appointed brand managers,” or be seeking social status and validation in a public forum.

    The paper offers some recommendations for those designing business rules for review sites to consider:

    • reduce social status ties to reviewing like “elite reviewer”
    • stop reporting every user’s number of reviews
    • make it more difficult to see all reviews by one reviewer
    • require prior purchase of the product before writing the review

    False reviews provide a terrific example of unintended consequences, like these unexpected benefits and perils of showing quantifiable metrics like a user’s number of reviews. Review sites are communities where human primate behaviors, as one colleague likes to call them, tend to inflate rather than retract. It’s clearly worth investing time upfront in experience design to increase the likelihood of legitimate reviews, and ongoing analytics to spot the trends surrounding the deceptive ones. You might want to leave just a little room for gaming the system, though: the 4,288 reviews of the Hutzler 571 Banana Slicer are priceless.

  • Farewell, “click here” – the disappearance of chrome

    Chrome is an umbrella term for the navigational elements throughout user interface design. NN Group offers a useful description of chrome at all layers of human-computer interaction, from operating system to website to mobile app. Fun fact: Google’s browser derives its name Chrome in part from this term since it attempts to minimize visible UI chrome — most notably by merging the address and search bars.

    Visible chrome is disappearing fast from many interfaces for desktop and mobile. Why?

    First, because our interface interactions are increasingly designed by and for digital natives. People who have grown up with “traditional” mouse/click, and then moved to touchscreen, and then moved to gestural interfaces powered by Kinect or Leap Motion aren’t going to need or want a lot of superfluous instruction.

    Next the the capabilities of technology fuel the disappearance of chrome. Think about the vanished “save” button in applications like Google Docs or Evernote. All your stuff is in the cloud, and it’s autosaving. There’s a task we don’t have to remind you to do, and a button removed.

    Finally, the rise of mobile has made us more conscious of real estate value. I can remember the collective sigh of relief when web designers in the late 1990s or early 2000s were liberated from 800 x 600 to 1024 x 768 — look at all those pixels we could commandeer! Now we’re increasingly cognizant of and designing for the reality that most experiences will be mobile first. Mobile for content consumption and commerce transaction are a new norm, and mobile design now affects what your “desktop web” looks like.

    A couple of website examples of the fading away of chrome:

    Back in 2005, Apple had to tell us what to do when we got to the home page:

    2005 apple home

    By 2013, Apple can offer a single clean horizontal navigation bar, and a large, visual carousel without any obvious forward or back arrows:

    2013 apple home

    Or take a site designed to appeal to a wider range of audiences: New York Public Library. In 2005, there was a lot of upfront and explicit instruction about what users can do on the page:

    2005 New York Public Library

    By 2013, there’s an assumption that users know how to directly manipulate the content to get the information or experience they want. There’s a single nav bar at top, but otherwise the first view surfaces the content and prompts interaction.

    2013 New York Public Library

    User interface design remains a balancing acts of many variables — navigability, clarity, form factor, appeal, and a content strategy you can support. Scaling back the chrome in these interfaces lets us reclaim valuable real estate, but it’s important to make sure usability doesn’t get lost in the shuffle.

  • Friday 5 – 05.17.2013

    Every Friday, find five quick links about compelling technologies, emerging trends, and interesting ideas. Source: the internet.

    1. Google celebrated I/O by dialing up the design, it seems. There are some sexy, new fast actions in Gmail and a flat, card-based Google+ re-launch that shows they’ve been doing plenty of pinning over in Mountain View.
    2. David Carr on Snooping and the News Media: It’s a 2-Way Street. Best line about digital trails: “The absence of friction has led to a culture of transgression. Clearly, if it can be known, it will be known.”
    3. Twitter buys some visualization skills so we have more ways to make sense of all those tweets.
    4. Quartz takes a look at why iPhones still have the lion’s share of mobile data activity. “So while it is true that Android phones vastly outsell iPhones, Apple users seem to be getting a lot more out of their devices. For now, at least.”
    5. There’s a lot of crisp thinking and beautiful writing going on in this elegant longform piece on MOOCs, Harvard, and higher education by Nathan Heller in The New Yorker.

  • 3 tips for timelines

    I can still remember the pain of drawing history report timelines during an analog childhood. The inevitable result was a shaky line of unequal width, with at least one or two skips on the ruler, and uneven pointed arrows each end. A career in draughtsmanship did not beckon.

    Timelines seem like the kind of thing digital technology would solve easily. We’d all agree on a protocol and set of user experience conventions, and voilà — a customizable template for slider-enabled, scannable history of any topic. Sadly, that doesn’t seem to have happened. While there are some solid solutions out there, there’s still a wide variety in execution and no common user experience dominates. Here are three tips for designing and developing a timeline.

    1. Think upfront about the content types/data points and the relationship among them. Will there be video? A slideshow? An infographic? When crafting the layout, let the content drive the design and not the reverse. It’s too easy to fall in love with a polished design experience to realize only too late that it won’t accommodate the information that will tell the story.
    2. Build in substantial testing with real users to make sure that features are not too subtle to be useful. It’s easy to underestimate actual user frustration with fiddly fingers and a bouncing eye track.
    3. Mobile views of the timeline are a requirement in a world where the Guardian reports record mobile traffic, and Buzzfeed, going after the bored-people-in-line market is up to 50% mobile. As devices and browsers proliferate, the user experience may need to degrade gracefully for some devices.

    Chronicle Timeline MOOCHere are two recent timeline examples with divergent approaches and effects. First, the Chronicle of Higher Education offers a timeline of MOOCs (massively open online courses). It’s a clean if clunky view, with a collapse feature that reduces the elements to headlines and a button to reverse the chronology. A vertical view may be easier for older users, but there’s no responsive for mobile. Best of all the timeline accommodates various content formats while keeping the layout clean.

    The Digital Public Library of America (DPLA) launched a beta site last week (coverage here) with a timeline view of the assets. This timeline is elegant, with a sexier horizontal orientation and responsive for mobile (although not fully swipe-able). The biggest challenge posed here is the content — there’s a long historical timeframe but some screens with 0 items shown. The controls are also extremely sensitive, and you have to drag the slider rather than click on an individual year to jump back and forth.

    DPLA timeline

    Bottom line: timelines aren’t a universally solved problem or easy to get right — a successful outcome depends on balancing functionality with design and working with the content and timeframe you have.

  • Lovely and functional football table

    Arsenal results

    Most of the football visualizations I find seem to vanish after a few weeks or months, but I sure hope The Beautiful Table sticks.

    Designed by Jon Ferry, this lovely and functional visualization shows you how your team (in my case, sadly, Arsenal in the Premier League) is faring. There are many small details that make this work, including use of club colors, smart mouseover behaviors withe match details, and data from both played and scheduled matches enhance the timeline.

    Kudos for making something elegant that solves an actual problem: show me how my team is doing without making me look at a HTML table on a web page designed in 1997.

    Found via infosthetics.

  • Weekend reading: Just My Type & my fascination with fonts

    Ignore the chick lit title — Just My Type is a wonderfully informative and gossipy exploration of fonts (thanks, Cesar). If you’re eager to learn why Garamond left an indelible mark on 16th century Paris, how Caslon cut the finest ampersand, or which master of the sans serif had a taste for ceaseless sexual experimentation, give it a go.

    I started my career in textbook publishing at Houghton Mifflin, a company which back in the late eighties had a management approach oddly similar to Dunder Mifflin today. What it did have in its favor was passionate editors, mostly highly educated women who cared not only about the pedagogical value of the content but also about the painstaking review of page proofs. The editors led endless page reviews to ensure the accuracy of the fonts, point sizes, and line leading — and the absence of widows and orphans. For better or worse, I had a knack for spotting a stray serif, and gained a love for fonts just before an embarrassment of them appeared on all our dropdown menus.

    Fast forward to Harvard in 2010, and to leading an effort to bring consistency to the University’s infamously decentralized visual identity. For the Harvard wordmark, the team settled on a modified version of Anziano Pro — striking a balance between Roman tradition and modern sensibility. It’s gratifying to see use of the wordmark spread as new digital properties are developed. Its success is partly driven by the desire for increased consistency, given the stark juxtapositions created by digital communications, and partly the recognition that fonts can reflect and amplify the nature of a message. It only takes one glimpse of Comic Sans on the side of an ambulance to understand the importance the right font.

  • Content & design practices from HBO Go

    AllThingsD interviewed Allison Moore, SVP digital platforms at HBO. HBO Go is one of my favorite apps, and provides, just as she describes “an incredible digital experience for our customers…just like they have with our content…wherever consumers expect us to be.” The “wherever they expect us to be” part is pretty impressive, with existing or planned content distribution partnerships with Roku XBOX, and more …

    Another point she raises about how the app design “not only brings in some kind of immersiveness and color and zap… but also gets out of the way.” In web and app design, this is the biggest tension – knowing how to convene users with your brand content, and how to support that convening, and then judging when to get the hell out of the way. Not as easy as it looks.