Feature
Post

Category
Design Focus

Design Focus: Reading List

These featured designs are all in keeping with a publication theme in terms of content and presentation. Although they don’t necessarily have to look like a shelf of books, it’s interesting to look at how they came up with such websites to accomplish their goals.

Designs of the Week

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Dark Water

Dark Water

A one-pager about a journal that looks nicely typeset and keeps that masthead feel with its footer credits. The way it’s photographed in the above-the-fold picture, not to mention the red accents, give it a bit of intrigue too.

The Hour

The Hour

This magazine featuring watches does a very clever thing with the background mimicking the second hand rotating round a clock. To the left you’ll see a couple of icons that switch between the magazine pages and its featured watches. The upper two links in both corners show content sliding in from their respective sides.

Reading Design

Reading Design

You don’t see “splash screens” too often except in asset-heavy, interactive sites. Here it’s a threshold to a text-heavy site, particularly an alphabetically arranged index of topics. Pretty much every detail here has that traditional print publication feel, apart from the quite-modern photo essays which you can view one at a time or as a grid.

Swiss in CSS

Swiss in CSS

A beautiful throwback brought into this century: the International Typographic Style is recreated as different dynamic posters with CSS, and I would have loved to read the thought process on what the animations were chosen for each design.

Publishing as (part-time) Practice

Publishing as (part-time) Practice

Covers of books arranged horizontally on imaginary shelf lines become vertically rotated “book spines” when hovered on. Very curious is the use of red, yellow, and blue as accent colors as you don’t see that everyday. Aside from that though, super elegant typographic details in here too.

Social Media Weekly

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

PerformancePerformance Budget Builder
“The Performance Budget builder lets you lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template.”

UXAny Research is Better Than No Research
“No matter how simple or complex your product, without research you are designing it based on assumptions.”

JavaScriptThe Controversial State of JavaScript Tooling
“Other languages and ecosystems are victims of all-encompassing standard libraries, but the web development community takes pride in not having that problem.”

CSSLearn CSS Layout the Pedantic Way
“CSS layout can be difficult to learn, because websites usually evolve incrementally. This means that you end up learning small tips and tricks here and there, and never learn the underlying layout algorithm.”

Feature
Post

Category
Design Focus

Design Focus: Get Some Perspective

As this year ends and a new one begins, it’s good to think different and look at things from a different angle. Here’s some inspiration to get you started.

Designs of the Week

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

Tennent Brown Architects

Tennent Brown Architects

Not only is the large heading text reminiscent of the lines and shapes of buildings, it has an excellent sliding animation following the same 3-dimensional form as you scroll down.

Tapmates Inc.

Tapmates Inc.

There are many different ways to show portfolio images and here it’s all about the isometric look combined with tiles of app screens sliding in and out along the same perspective lines, although with not the most readable of angles.

YES

YES

There’s something amusing about a perpetually spinning logo on a website, like an endlessly flashing sign in a busy urban area.

Leanne Bentley

Leanne Bentley

Still in the infinite loop department, this one’s a single page of works that continuously scroll up, with the upper left text using a differential blend mode making for an interesting effect.

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

Responsive Design, TypographyA Responsive Guide to Type Sizing
“Proportions are a key ingredient to the mixture. Calibrating your type proportions for a balance of aesthetics and order can be an obsessive undertaking.”

Interface DesignHow Tabs Should Work
“Sadly, most of the time I come across them, the tabs have been badly, or rather partially, implemented.”

Feature
Post

Category
Design Focus

Design Focus: Fall In Line

These sites feature prominent lines that steer your way of reading and browsing the page.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

10 Years of Git

10 Years of Git

Lovely illustrations in an orange and navy palette, with full-screen popups that appear when you click on the ‘info’ icons.

Jun Duffy

Jun Duffy

It probably isn’t appropriate for other online shops, but the freeform arrangement of the products as you scroll down is a welcome change from the rigid grid that defines majority of e-commerce. Hover on one article of clothing and short wiggle animation.

Si digital

Si digital

I always enjoy a mad scientist lab motif in the design, and this one even has a robot that lets you shoot Walter White.

Sam Skinner

Sam Skinner

A super simple design that only makes use of icons (is that Wingdings?) and dotted lines that are drawn as you hover on one glyph and move to the next. Clicking loads the project description, and all the icons’ switching from one glyph to another that act as the loading “spinner gif”.

Social Media Weekly

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Web TypographySeriously, Don’t Use Icon Fonts
“If you won’t stop using icon fonts for people with screen readers, people with dyslexia, people with browsers that don’t support @font-face, people who randomly didn’t load the icon font once for some reason, or designers who just want their icons to look right on-screen…”

DevelopmentKey Considerations For Designing A Cross Platform Application
“To help you streamline your app design in an optimal fashion, here, is a list of noteworthy aspects that must be kept in mind while designing cross platform application.”

DesignDesigning destinations at Lonely Planet
“We want to place an emphasis on organization, tools that help people quickly find the top things to do in each location, and a curated set of places and experiences that help people get to the heart of a destination.”

Feature
Post

Category
Design Focus

Design Focus: Drag-‘n’-Drop

These sites invite you to interact with them by more than points and clicks, and mouse around with drag and drop features.

Designs of the Week

Create unique, extraordinary websites with Squarespace. No experience necessary!

Minon

Minon

One of the best ways to up the dynamic ante especially with an online shop is drag and drop, and here it’s about putting ingredients on a cake to customize it. The best part is the puff of smoke that appears when the change happens, adding magic to the moment.

Prizma

Prizma

The site invites you to personalize the space by dragging an image and generating a kaleidoscope effect out of it.

Jakob de Boer

Jakob de Boer

Horizontal scrolling is the next most common application for a drag action, and here it’s to scrub through the timeline of a gallery, blog, and Twitter feed.

Bryan James

Bryan James

Yellow page border and matching custom scrollbars, a loading gif that’s based on the designer’s logo and other small touches that make the feel more coherent.

Files Rec.

Files Rec.

A spherical of white dots on black space come alive and change into different forms and letters when the music gets played.

Agency Survival Kit

Agency Survival Kit

Switch through three diferent products sideways, then uncover the kit and more details about each by scrolling downwards.

Nerval

Nerval

The scrolling main text can be dragged left and right, and on inner pages they just scroll as a watermark in the background.

Social Media Weekly

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

DesignInside Hearst’s New Agile Design Process
“Watch as Hearst Digital’s Creative Director Theresa Mershon shows you how agile publishing and the process, skill and workflow changes that her team made this year allowed them to go from launching one website every few months to publishing a new title in as little as three days, helped double their traffic, and improved engagement.”

TypographyTypography Tools on the Web
“They each work in their own way to get the finer details into focus for designing websites, app or even typefaces. Some, for details that are often missed.”

Feature
Post

Category
Design Focus

Design Focus: Dots & Circles

Emulating the circular form is always an intriguing exercise because of its technical and aesthetic challenges, especially on the Web. So every year it’s a delight to see designs that explore the “perfect shape” and take it to the next level.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Arc

Arc

I love the way the arc of the circles shift as you scroll down and the text comes in, which are also laid out in a quietly elegant way. The “hamburger menu” does not sport 3 lines but two, which morph into a an “x” or close button once opened.

Seven Brief Lessons on Physics

Seven Brief Lessons on Physics

I don’t know if the book cover inspired the site design, or it was planned in sync, but this site is the perfect digital companion that interprets the scientific lessons in a dynamic, interactive way, from the illustrations & animations to the audio excerpts.

Junior

Junior

More mesmerizing animations in between messages the company believes in—interestingly this is the focus of the site, instead of the common sections like work and people. For the most part it’s black and white, with sprinkles of thin lines and small dots of light colors. Click “More” to dive into their background, or “Less” for the contact info.

Garbett Design

Garbett Design

A sheet of transparent dots that slides up when you click, revealing two main sections: their selected work, and their studio. Bright, solid blocks of color match their geometric aesthetic in their portfolio. This site also also bucks the trend of placing their contact/social links at the bottom, and instead are readily visible at the top.

codedoodl.es

codedoodl.es

Hovering on the red circles transform them into diamonds and animates the thumbnails of the code experiments. The text blocks on the page also change into random character strings for the “Matrix”-y effect.

SolarBeat

SolarBeat

Another beautiful experiment combining science, visualization, and also music. The concentric circles represent both the paths of the planets and a vinyl record playing the notes based on the speed of their revolutions around the sun, with several parameters you can tweak.

Chris Wang

Chris Wang

Icons of the designers’ projects are arranged radially around his initials and load in an overlay when clicked. What I find interesting is the NDA projects are also displayed—although the images are pixelated, some details about the work is still given so it’s a good approach to add it to one’s body of work.

Blackbox

Blackbox

Beautiful animation of a 3D globe with animated “boxes”, representing their product, flying all over. This is contrasted with friendly drawings of their team in the bottom half of the page.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

User ExperienceHow to Run an Unmoderated Remote Usability Test (URUT)
“Usability testing is a super flexible technique that allows for the assessment of a variety of aspects of an interface including the broad product concept, interaction design, visual design, content, labels, calls-to-action, search and information architecture.”

CSSAnimation Advice from a CSS Master
“By using CSS for animation and transitions, you’re moving those tasks from the JavaScript thread to the graphics processing thread. When using JavaScript for animation, you run the risk of other JS operations being held up until the animation completes. With CSS, the JavaScript portion of your pages remain available.”

DesignThe Salesforce Team Model for Scaling a Design System
“I believe that even the best systems need human guidance to succeed and survive. For us, that means helping and empowering designers to produce high-quality, brand-aligned, system-minded work.”

Feature
Post

Category
Design Focus

Design Focus: Glitchy

There’s several decades worth of story behind glitch art, but it’s experiencing an interactive surge in web design now that the tools and technology have finally caught up. All about the anti-slick, anti-perfectionist, these sites are the very essence of disruption.

Designs of the Week

Create unique, extraordinary websites with Squarespace. No experience necessary!

nclud

nclud

Besides the strong header photo and the glitch page transitions, there’s no letting up on the bold look in every corner: purples and greens, heavy Helvetica, and succint calls to action.

Web Terror

Web Terror

I only wish there were more related design elements to the glitch loading screen, because as you go inside it’s a pretty neutral look.

Boudicca Wode

Boudicca Wode

I really like the different layers of colors, patterns, and text all masked on top of the other. I keep scrolling back and forth, and the look keeps changing like a fascinating art installation where you gotta check it out from every angle. Perhaps the most surprising thing of all is this site is for a perfume product, the last thing I would think of to apply the glitch look on, yet its whole branding centers around that.

Lionel Durimel

Lionel Durimel

I appreciate the integration of keyboard navigation here, it just fits into the hacker-feel that goes with glitch. Inside the work pages go light gray and scroll horizontally, with the mouse cursor replaced by an ‘X’.

Google Ideas

Google Ideas

On this site the glitch ties in to the analog crackle of the audio clips, and that’s the central feature here. Instead of just reading about the their users’ stories, you can actually listen to them tell it to you and read it as they go.

Squarepusher

Squarepusher

Besides the horizontal strips of color that appear as you scroll and disappear once you stop, the design also features inverted text in fixed-width fonts, sometimes laid on top of the other as graphics themselves.

Social Media Weekly

Get solid WordPress themes, plugins, and web design training from iThemes.

CSSGlitch Effect on Text / Images / SVG
“It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space.”

Email DesignEmail Design Guide
“The Email Design Guide is filled with tips and advice to help you convey your message in style. Learn how to better use images, fonts, calls to action and more.”

Feature
Post

Category
Design, Strategy

8 Analog Tools to Help You Design

Design doesn’t just happen in software, editors, or the browser—it often starts offline with the simplest of tools: pen and paper. With that in mind, let’s do a round up of helpful analog tools that can aid you in the process of brainstorming, doodling, sketching, wireframing, or prototyping by hand.

BASICS Notebook

BASICS notebook

BASICS notebook

The BASICS Notebook keeps you both productive and creative so you can stay on top of your project timelines and do the ideation in one place. It has different page layouts like calendars and checklists plus blank sheets & erasable whiteboard pages right in the palm of your hand. It also has practical features like a back pocket for loose leaves and just enough of a gap so you can tuck in your pen at the top.

Website Deck

Website Deck

Website Deck

UX Kits Website Deck gives a tactile approach to website mapping & information architecture. Each card in the “deck” represent different types of content or interface patterns you can lay out and rearrange as you plan the the site or app structure. Numbered from 1-53, they’re also portable & reusable.

Whitelines

Whitelines

Whitelines

Whitelines produces pads & books that, as the name suggests, sport white lines on their sheets. One of its products, Whitelines Link, has marked corners which helps its companion app digitally capture your ideas.

The Psychology of Colour Pencil Set

Psychology of Colour Pencil Set

Psychology of Colour Pencil Set

The Psychology of Colour Pencil Set consists of 12 colored pencils, each labeled with a word conveyed by its corresponding color. The set also includes a booklet that expounds on those concepts.

Dotgrid

Dotgrid Books & Notepads

Dotgrid Books & Notepads

Dotgrid features different incarnations of notepads and papers with dotted grids on their sheets. Special editions like a birch wood cover and a tribute to Steve Jobs are available.

Magnetic Blackboard Wallpaper

Magnetic Blackboard Wallpaper

Magnetic Blackboard Wallpaper

The Magnetic Blackboard Wallpaper lets you draw and stick stuff at the same time without the bulk of an actual board or the need to paint your walls. It’s available in three sizes: 63.5 x 265 cm, 127 x 265 cm, and 127 x 100 cm (width by roll length).

UI Stencils

UI Stencils

UI Stencils

UI Stencils lets you sketch out different user interface elements on paper quickly with the help of different stainless steel and plastic stencils. They also have pixel rules & pads of browsers and mobile devices.

BreakThroughColour Cards + Cubes

BreakThroughColour Cards + Cubes

BreakThroughColour Cards + Cubes

BreakThroughColour Cards + Cubes lets you explore or even play with a wide array of colors through dozens of colored cards and cubes. It special numbering system and and codes on the flip-side of the cards reveal how their vary on hue, saturation, and value.

Feature
Post

Category
Code, Strategy

Make your site more sociable with OpenGraph markup

The Art of Social Media

These days, before people click on your site they will probably see it through a link shared on your social network of choice, such as Facebook, Twitter, Google+, and so on. Usually these sites are smart enough to extract descriptive information about your page and display that so followers already get a good idea of what they’d be clicking on, but wouldn’t it be great if you could optimize that information to ensure you get more engagement?

With a bit of HTML knowledge (and perhaps some programming knowledge, depending on what website templates you’re using), you can make more sites more “sociable” by adding these tags to the <head> portion of your site. Text in {CURLY BRACES} are placeholders for the values you need to insert.

og:url

<meta property="og:url" content="{URL}">

Use this to show the canonical url of your page, free from various query variables or tokens. If you use a CMS like WordPress, this can be automatically generated for posts and pages through a function like the_permalink()

og:title

<meta property="og:title" content="{TITLE}">

Use this to show the title of your page. By default sites like Facebook usually get the text from the <title> tag, displayed on the browser title bar or tab name, but that usually contains extra stuff like the site description. With a custom OG tag you can opt to modify that to your liking.

og:type

<meta property="og:type" content="{TYPE}">

Use this to indicate the type of content your link is all about. Of course all links are websites, but they can also be more specific things like articles, products, books, movies, restaurants, and more.

og:image

<meta property="og:type" content="{IMAGE}">

A lot of times the images that displays with your link can encourage or prevent people from clicking, so make sure that you define this. There are optimal sizes for what Facebook, Twitter, and Google+ recommend, so be sure to check their individual documentation on that.

og:description

<meta property="og:type" content="{DESCRIPTION}">

Similar to title and image, you’ll want to optimize the description of your webpage since there is only so much text social networking sites can include in their link previews.

Closing note: on Twitter and Testing

When you’ve plugged in the above tags, you’ve pretty much guaranteed Facebook and Google+ to display your website links the way you customized it. However, Twitter has a couple more tags you might want to integrate, including twitter:site, where you can plug in the Twitter handle of your website, and twitter:creator, a different person or organization that is behind the website.

Twitter also has content types called Cards, which lets you specify the most appropriate layout for a link preview—whether it’s a summary card, a summary card with a large image, an app card, or a player card. Each card type emphasizes different data, so choose wisely or switch things up as you see fit.

Finally, it’s always the best practice to test things before rolling them out. Check out the links below for more detailed documentation and tips for sharing content on each social network:

 

Feature
Post

Category
Design Focus

Design Focus: Embrace the Chaos

Understanding and navigating through sites requires a certain amount of order, so when designers get busy with dazzling visualizations and arrangements, there remains a method to their madness.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Chaos

Eduardo del Fraile

Eduardo del Fraile

Digital Haiku

Digital Haiku

Bucharest

Bucharest

Canvas

Canvas

Squid Ink Flat Icons

Squid Ink Flat Icons

Mirumee

Mirumee

Kitasenju Design

Kitasenju Design

Fast Forward Labs

Fast Forward Labs

Social Media Weekly

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Web DesignCopy & Paste & The Web
“Have you ever tried to copy and paste some text only to find it frustrating, awkward, or even impossible? I bet you have. It’s not random. On the web, you have a decent amount of control over it.”

Design, BusinessHeist
“The line between success and failure is murky. It’s not a binary metric that you can rely on to help you make tough decisions.”

User Interface DesignInterface Writing: Code for Humans
“Focus on the reader’s needs. Think about the implications of what you’re asking for. Be honest about what you’re doing with the data. That’s extremely important.”

Feature
Post

Category
Design Focus

Design Focus: Stacking Order

There are many different ways to provide the illusion of depth, and for these set of featured sites it’s all about stacking different layers of content one on top of the other, resulting in very interesting interaction and interface design.

Designs of the Week

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

TWO5SIX 2015

TWO5SIX 2015

Some cool color-changing going on in addition to the unusual scrolling: sections are arranged by stacks of white “pages” with one in front of the other, and as you scroll downwards each layer drops downward. What’s a little weird is seeing the text move upwards, only to hide downwards when you reach the end of each “page”. You can browse with the top menu or the navigation markers on the right. They’re thin horizontal bars by default, but when you hover on them they become tall rectangles, and have the “pages” peek out halfway like thumbnails.

Susanne Chmela

Susanne Chmela

I love all these different approaches to cycle groups of images a.k.a. the slider or carousel. In this site they’re represented as stacks with blue outlines, where clicking makes the top disappear and you see the next image, until you reach the bottom where the description of the project is revealed. No alternative navigation cues like buttons or arrows are present, but your cursor has the word “click” attached to it. The niftiest part is the subtle movement of the stacks as you scroll—expanding or compressing ever so slightly like an accordion.

Colin Snow

Colin Snow

Scattered layout with different ways of interacting with the projects: either video that play when you enter its area, or gallery of images that cycle as you click on them. Meanwhile, when you hover on the designers name and move the cursor around, different slices of said name flash in different sizes and places on the page, making for an interesting dynamic effect.

ETH Prof Lehnerer

ETH Prof Lehnerer

Different sections of the site are visible in layers, which is a different but possibly more helpful way of knowing where you’re browsing. Clicking on an event shows its page on top of the previous list, while the overview of the site is found at the bottom of the two.

Social Media Weekly

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

User ExperienceSimple UX mistakes to avoid on your blog – Volume 2

Web DesignThe 10 Commandments of Good Form Design on the Web

Feature
Post

Category
Design Focus

Design Focus: Pins & Trails

These websites use maps to illuminate information or as a primary motif in their designs.

Designs of the Week

Ready to go out and design your next website? Try building with the Catalyst Framework.

Our Tam

Our Tam

Not flat, but a three-dimensional map traversing the different regions of Mount Tamalpais.

Designers Atlas

Designers Atlas

Not a literal map of designers, but a portfolio of one. Map elements like lines and icons are animated and used as markers.

District Magazine

District Magazine

The logo is oriented and cleverly spins like a compass. Also as your pointer moves around the background map, the coordiantes on the lower left update.

50 problems in 50 days

50 problems in 50 days

It’s always cool to present location-based stories on a map, and here you also have the option of viewing them in a neater grid layout.

Svenska kyrkans Internationella arbete

Svenska kyrkans Internationella arbete

This one also has a side drawer with filter and list views, and I like the subtly pulsing effect on the circular markers and the popup animation with the photos.

Word Map

Word Map

Not only is this a great idea for an informative map, but you can also see how a word is adopted from one country to others.

Social Media Weekly

Get solid WordPress themes, plugins, and even design training from iThemes.

Email Web DesignUsing Images in HTML Email
“ALT text should be baked into your image tags, at least for most images in an email.”

JavaScriptInterview: The Future of Web Animation with Julian Shapiro
“The higher we can push animations to perform — across all browsers and devices — the sooner the slick motion design commonly found in mobile apps will exist without compromise on the Web.”

Mobile Web DesignWhy ‘Mobile First’ May Already Be Outdated
“Only tracking someone on a “mobile device” is an incomplete picture and will result in poor targeting of messages and ads.”

JavaScriptReplacing jQuery with D3
“Although D3 has powerful features like its selectors or an ajax wrapper already built-in, we are often times missing some jQuery functions in our D3 projects. That’s why we will show some approaches on how you can replace jQuery by only using D3.”

Feature
Post

Category
Design Focus

Design Focus: Websites are Made of These

Metaphors are a cornerstone of design, but what if the design itself shows the tools and components used to build a website? The result is an interesting “x-ray” into the web design process, as seen in this week’s featured sites.

Designs of the Week

Get solid WordPress themes, plugins, and even design training from iThemes.

JLern Design

JLern Design

Instead of the usual links or thumbnails, this site uses website wireframes to represent the subpages, showing the actual yet abstracted layout of each page. The cool thing is the transition, where you see the wireframe “come to life” with the live content and color-coded elements. All the pages also appear side by side once you go into one of them, so it’s like you’re zooming in, almost physically exploring the website.

Hand.Gallery

Hand.Gallery

This design is reminiscent of speed painting videos, except done in the context of creating a website. You’re literally watching the site transform in terms of typography, color, and layout live. It’s probably intimidating and gimmicky for certain audiences, but being an online art gallery and still in its coming soon phase makes for an interesting art piece itself.

Dow-Smith Studio

Dow-Smith Studio

Browsing with a browser inside of a browser seems a little on the nose, but the fact that these are live sites shown in each tab speaks to the confidence of the designer in presenting the work—no pixel perfect screens here, you’re interacting with the real deal. In a smaller container of course, but you can click on the “go” icon to see it in a new window. I also like that the description above fades out and the background becomes this powder blue to light gray gradient.

Designers' Friend

Designers’ Friend

And what is a website without HTML? The page shows a Tip dialog which you can close or move out of the way, as if you’re using a Linux OS inside the browser. You can then proceed edit all the code on the page, click on the red links, and hover on the <img> tags. Again, this interface could intimidate non-techies, but that will also tell you whom this page is really for.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

User ExperienceDesigner’s Toolkit: A Primer On Capturing Research
“A good structure is to have a moderator and a note taker, that way one practitioner can focus on conversing with the participant, while the other focuses on capturing what is occurring.”

DesignWhy the Golden Ratio matters
“The visually-inclined — artists, architects and designers, historically keen observers and documentarians of both nature and the human condition and who we can thank for much of what we know about the world — have for ages incorporated this ratio into their work due to its intrinsically alluring balance between symmetry and asymmetry.”

Usability6 Usability tasks you haven’t tried so far, but really should!
“Below you find 6 example task that can provide new and different insights than the standard usability tasks.”