Tutorials

Tutorials about HTML, CSS, PHP, Javascript, and Photoshop

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Archives
    Archives Contains a list of blog posts that were created previously.
  • Login
5816

Web tableaus — photographed scenes of work environments — are a popular web design trend right now.

I came across the term from Frank Chimero’s blog post about the subject, and it was the first time I’ve seen the web tableau trend analyzed.

I thought I’d put together a showcase of websites that use web tableaus for you.

Examples of Web Tableaus

Here are a few sites that use web tableaus:

Grovemade

Grovemade

Squarespace Stories

Squarespace Stories

Littlelines

The Prince Ink Company

The Prince Ink Company

The Brand Bat

The Brand Bat

Eva Black Design

Eva Black Design

Sickdesigner.com

Sickdesigner.com

Doris Research

Doris Research

BJÖRN MEIER

BJÖRN MEIER

Little

Little

Olly Sorsby Design Co.

Olly Sorsby Design Co.

Munchery

Munchery

Why Use Web Tableaus?

Every single thing a web designer does should be meaningful. Design decisions must meet an objective besides achieving great aesthetics.

Here are a couple of reasons for using web tableaus in your designs:

To Show How Your Product Works

When we initially stumble upon a new digital product (like a mobile app) that we’ve never seen before, it’s hard to envision how it could possibly work for us and how it could fit into our lives.

And for developers of digital products, it’s extremely challenging to explain how useful their product is when people can’t touch it or immediately experience its benefits.

Web tableaus are practical visuals for demonstrating a product’s utility.

For example, let’s look at Wallmob’s web tableau.

Wallmob is a networked point-of-sale application. That’s not very sexy, is it? And how does it work?

Wallmob

The scene of a person holding a mobile tablet with the Wallmob app up on the device’s screen is a very informative visual.

It gives potential users of the software an idea of what Wallmob can provide them: A portable point-of-sale system that has a user-friendly interface that runs on existing touchscreen mobile devices. No more dedicated and extremely expensive POS systems.

The picture is truly worth a thousand words. With just one photo, Wallmob is able to communicate the pain point the company is trying to solve.

To Keep It Real

By giving people a sneak peek of the place in which we craft our work, we’re able to humanize and add value to our products.

A good discussion point for this is Wootten — a company that creates handmade shoes and other leather products.

If you’re not familiar with the brand, just by looking at their merchandise, you wouldn’t be able to know or appreciate that real people painstakingly make all Wootten products.

But handcrafted, customized apparel is what makes Wootten different from the big, incumbent fashion brands that get their products mass-manufactured in some undisclosed factory.

How can Wootten articulate their uniqueness to their buyers?

Through a web tableau.

Wootten

In the tableau, we see a craftsman with manual tools laboring on a workbench and the beginnings of a Wootten item.

This one scene was able to tell the brand’s entire story, and viewers end up having a better appreciation of the company’s products.

On his web tableaus post, Frank Chimero shares his thoughts on what web tableaus bring to the table — you should definitely read his post for more insights into this trend.

What do you think of web tableaus? What are other reasons for using them in web designs?

Related Content

About the Author

Jacob Gube is the founder and editor-in-chief of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post 14 Examples of Websites That Use Web Tableaus appeared first on Six Revisions.

Continue reading
0
4182

Whenever I’m working with a new client, the first question I ask them is what they want their website to do for them.

Often, they don’t know. They just think a website is something they should probably have. Because other businesses have them.

But a website is an investment, of both time and money, and from a business perspective, it won’t be a smart one unless you know exactly what to expect out of your investment.

Knowing what we need a website to achieve right from the start is crucially important to the entire project.

It helps us maximize our conversion rates.

It helps us develop a unified design direction.

It helps us make good, logical decisions throughout the entire process.

It helps us communicate our message more clearly with our teammates, our clients and our site users.

In this article, we will talk about objectives-driven design.

Types of Website Objectives

We could classify site objectives into two types:

  1. High-level objectives
  2. User-interaction objectives

These objectives must be identified at the start of website projects.

Identifying High-level Objectives

High-level objectives are the things you want to get out of having a site. How will the website contribute to the bottom line of the business?

Examples of high-level objectives can be:

  • Selling a product or set of products either on-site or a third-party marketplace
  • Generating ad revenue through great content that people want to read
  • Convincing people to subscribe or sign up for a web service or membership
  • Getting people to donate to your non-profit organization
  • Increasing people’s awareness of the business
  • Persuading people to contact the site owner via phone, email and/or a web form

High-level objectives will drive the entire website production process.

Identifying User-interaction Objectives

After we identify high-level objectives of a site, we are ready to develop specific user-interaction objectives.

User-interaction objectives are specific things we would like people to do on our site.

Our user-interaction objectives should be purposeful. They should, directly or indirectly, lead to the achievement of our high-level objectives.

We can categorize user-interaction objectives into two types:

  • Primary user-interaction objective
  • Supportive user-interaction objective

Primary User-interaction Objective

A primary user-interaction objective is any interaction that will almost always count towards achieving our high-level objectives.

For example, a user clicking on a "sign up" button is a primary user-interaction objective because it is a direct action towards our high-level objective of acquiring more users.

Supportive User-interaction Objectives

Some people might not be ready to perform primary user-interaction objectives. They might need to see more persuasive content in order to get them to sign up, for example.

That’s where supportive user-interaction objectives come into play.

They are like a safety net for us: If the person isn’t ready to take the primary user-interaction user-flow, then we provide them with alternative options that may eventually lead to it.

An example of a supportive user-interaction objective is a person to clicking on a "learn more" link where they can read about the features of the product, key benefits, see a demo video and other persuasive material that may eventually lead to them clicking on the "sign up" button.

Examples of User-interaction Objectives

Here are a few examples of user-interaction objectives:

Primary Supportive
Click on "Sign up" button - Click on "learn more" button
- Watch a demo video
- Go through a feature tour
- Read testimonials from existing customers
Click on "Buy now" button - View photos of products
- Read customer reviews of products
- Add to "wish list" for later action
Click on "Donate" button - Watch video about charity activities
- Sign up for charity’s email newsletter

How It All Ties Together

Here is how all the types of website objectives work together:

Objectives-driven Design in Action

Let us look at some objectives-driven designs to gain a better understanding of the concept.

In each example, see how specific design techniques like color choices, object sizing, visual hierarchy, groupings, and so forth inform us clearly what the objectives are.

Example 1: Dropbox

Dropbox

High-level objectives
Increase the number of new Dropbox users
Encourage existing users to continue using Dropbox
Primary user-interaction objectives Purpose
Click "Sign up" button Increase the number of new users
Click "Download" Encourage existing users to continue using Dropbox by increasing the number of devices they install the software on
Click "Sign in" Encourage existing users to continue using Dropbox
Supportive user-interaction objective Purpose
Click or scroll down to "Learn more" section Convince potential users to sign up

Example 2: Barack Obama

Barack Obama

Barack Obama’s site is another example of an objectives-driven design.

High-level objectives
Get donations
Voter engagement
Voter awareness
Primary user-interaction objectives Purpose
Click "Donate" - Get donations
- Voter engagement
Complete web form to sign up to mailing list - Voter engagement
- Voter awareness
Click "Create account" - Voter engagement
Click "Log in" - Voter engagement
Supportive user-interaction objectives Purpose
Click "Get the Facts" To educate and convince people to donate, increase engagement or improve awareness
Click "Get the Latest" To educate and convince people to donate, increase engagement or improve awareness
Click "Get Involved" To educate and convince people to donate, increase engagement or improve awareness

Example 3: Treehouse

Treehouse

Treehouse is a site that provides online web design courses. Let’s see how objectives-based design is achieved in this example.

High-level objective
Increase the number of new Treehouse users
Primary user-interaction objective Purpose
Click on "Free Trial" Increase the number of new users
Supportive user-interaction objectives Purpose
Click "How it works" Convince users to sign up
Click on "Features" Convince users to sign up
Click on "Pricing" Address a potential concern about costs

Example 4: Invision

Invision

We can see the same design pattern we saw on Treehouse’s site on Invision’s home page.

High-level objective
Increase the number of new Invision users
Primary user-interaction objective Purpose
Click on "Get Started Free" or "Sign Up Free" Increase the number of new users
Supportive user-interaction objectives Purpose
Click "Learn More" Convince users to sign up
Click "Tour" Convince users to sign up
Click "Customers" Convince users to sign up
Click "Blog" Give people insights about the people behind the company
Click "Enterprise" Convince a specific group of users to sign up
Send questions using the live chat widget Allows the company to address concerns that prevent a potential user from signing up

Example 5: Keep SA Real

Keep SA Real

Keep SA Real is an online store that sells apparel.

High-level objective
Sell SA Real products
Primary user-interaction objective Purpose
Click "Browse Shop" button or "Shop" link Show people what they can buy
Supportive user-interaction objectives Purpose
Click "About" Provide potential buyers information that can help them make a purchasing decision
Click "Blog" Provide potential buyers insights about the company selling the products
Click "Contact" Allows the company to address concerns that are preventing potential buyers from making a purchase

Implementing Objectives-driven Design

We have gone over the basics of objectives-driven design as well as a few examples where we can see the idea in action.

Now, let’s go over some of the things you can do in order to use the concept in your projects.

Integrate an Objectives Identification Phase in Your Design Process

A good project workflow should always start by identifying key objectives. And when doing so, give it the time it deserves.

Make the identification phase an official part of the process and have guidelines that will help you tease out objectives.

Then get sign-off from all the people involved so that everyone’s on the same page.

Write down the key objectives and regularly refer to them. Use them to back up your design and development decisions.

If you need some ideas for this, read the following:

Use Objectives-driven Design Methods to Your Advantage

There are many tricks-of-the-trade techniques you can use to help you design with objectives in mind.

Most of them will help you better arrange your layouts in order to emphasize on your key objectives.

Here are some design techniques and concepts that help with objectives-driven design:

Keep It Simple

A basic principle that should be followed throughout the process of objectives-based design is to keep it simple.

Simplicity ensures that we don’t clutter our layouts with things that can derail our users from our key objectives.

In addition, too many options can lead to decision-paralysis. Look back to the examples we discussed to see how keeping it simple works for objectives-driven design. They all have a limited set of actions you can take.

These articles on the topic will help you keep things simple:

Conclusion

Having clear objectives of what you want a website to do for you is a critical step towards its success.

Once you know what your objectives are, you can design the entire site in a way that helps fulfill them.

Related Content

About the Author

Rachel McCollin is a freelance web designer specializing in WordPress and responsive design. She’s written three books on WordPress. Connect with her on Twitter @rachelmccollin and visit her site at rachelmccollin.co.uk.

The post Designing for Your Objectives appeared first on Six Revisions.

Continue reading
0
9128

Recently, a coalescing of Agile software development methods and UX design has resulted in what is being called Agile UX design.

Agile UX design frames user experience design within the Agile development framework.

To a few, this idea might come as a surprise because Agile methods and UX design seem like they are unrelated, or even at odds.

Agile software development presumes and embraces the unknown as part of building and shipping a product. In other words, Agile views product development as an iterative process.

On the other hand, conventional design methods stress the need for getting as much knowledge and certainty up-front regarding the product being built, and how users might use it.

However, looking deeper, you will see that combining Agile and user experience design philosophies can mean an efficient way of building great things.

Key Principles of Agile Software Development

For those not familiar with Agile, a concise list of Agile principles can be found here: Principles behind the Agile Manifesto. Reading the principles of Agile will help you understand its important core concepts.

Though many different types of Agile method implementations exist (e.g. Scrum, Crystal Clear, XP) there are a few key principles that unify them:

  1. Team-member interactions play a key role in software development.
  2. Customer feedback and deep analysis is an integral part of the development process. Feedback is collected and gauged early on, putting the end-user in the driver’s seat of product development.
  3. Projects are completed in increments, allowing software development to respond to changes as part of the process.

These key principles demonstrate how embracing Agile methods can improve and complement user experience design methods.

What is Agile UX?

Agile UX embraces the key principles of Agile software development, reframed in the context of design activities.

Designers work in continuous collaboration with team members, integrating customer feedback and change with each iteration on the project.

Activities at each product iteration stage may evolve or enhance the look-and-feel of the software product, so designers are a crucial element of the Agile team. No one works in a vacuum. Developers and designers work together to build a cohesive product.

The design of the software evolves in tandem with subsequent iterations, as opposed to being applied to the product as a pre-development activity.

To mitigate knowledge gaps that may arise from the transitory nature of project specifications, constant contact and design review meetings are held to keep in sync with product iterations.

Tips for Implementing Agile UX

Implementing Agile UX

The following tips may help you in introducing and integrating Agile methods to your current UX design workflow.

Learn the Basics of Agile Software Development

Since Agile UX design is somewhat of a departure from the traditional UX design methodology, it may be useful for everyone in the production team — project managers, designers, developers, and so forth — to take part in training or self-study to familiarize themselves with the fundamentals of Agile.

Agile teams may throw around words such as "sprint," "backlog," and "burndown chart" — not rocket-science terminology by any measure — that may cause initial confusion for the uninitiated.

To help you efficiently learn about Agile, and implement it quickly in your team, there are book suggestions and articles at the end of this post.

Being on the same wavelength will help your team communicate and produce great software together.

Tailor Agile Processes to Your Needs

Agile is not a one-size-fits-all methodology. In the real world, specifics and needs vary by organization. That is why there are at least 11 well-known Agile frameworks right now.

Once you have mastered the fundamentals of Agile, you should tweak and fine-tune processes to suit your needs. For example, your company’s culture may not be naturally collaborative in nature (i.e. a lot of work is done in silos). Or perhaps your team includes members who work remotely (distributed teams), which means some tweaking to the process is needed to be effective. Both these cases will present unique challenges and require adjustments.

Make a Habit of Working Iteratively

Designers by nature are taught to think bigger-picture and often strive for perfection on the get-go.

Agile UX design reminds designers that product development is incremental.

We should anticipate and embrace feedback and constant product changes as a catalyst for progress, as opposed to a hindrance or nuisance.

Use Collaboration Tools

Agile methods, and effective team dynamics in general, rely quite heavily on effective communication.

The good news is that with the right set of tools, anything is possible… even effective collaboration between designers and developers.

Explore your options when it comes to communication and project management tools such as Asana, Basecamp and Google Drive, and design platforms such as UXPin (which I am the CEO of) and Invision App.

Teamwork is Essential

Designers, developers, managers and stakeholders will need to collaborate throughout the design and development process as this is the key to effective Agile UX.

Books to Read on Agile UX

Here are 4 books that will help you master Agile UX.

Agile Experience Design

Book cover: Agile Experience Design

Buy on AmazonOfficial site

Get Agile! Scrum for UX, Design & Development

Book cover: Get Agile! Scrum for UX, Design & Development

Buy on AmazonOfficial site

Lean UX: Applying Lean Principles to Improve User Experience

Book cover: Lean UX: Applying Lean Principles to Improve User Experience

Buy on AmazonOfficial site

Agile User Experience Design: A Practitioner’s Guide to Making It Work

Book cover: Agile User Experience Design: A Practitioner's Guide to Making It Work

Buy on AmazonOfficial site

Further Reading on Agile UX

Related Content

About the Author

Marcin Treder is the CEO of UXPin, a UX design platform and is the author of several UX design books (e.g. UX Design for Startups).

The post A Quick Introduction to Agile UX Design appeared first on Six Revisions.

Continue reading
0
3693

Free Vector Infographic Design Template (AI)

This freebie will help you design beautiful infographics. This freebie consists of vector-based artwork (Adobe Illustrator files) which means you can easily edit and scale the infographic components without sacrificing image quality.

This freebie is by Freepik.com (a design-resource search engine) and was created exclusively for Six Revisions readers to use in their design projects.

Previews

Full Preview

Full Preview

This freebie is separated into 7 vector .AI files, representing each component of the infographic design kit. Below, you will find previews of each component.

Infographic Component 1 Preview

Infographic Component 1 Preview

Infographic Component 2 Preview

Infographic Component 2 Preview

Infographic Component 3 Preview

Infographic Component 3 Preview

Infographic Component 4 Preview

Infographic Component 4 Preview

Infographic Component 5 Preview

Infographic Component 5 Preview

Infographic Component 6 Preview

Infographic Component 6 Preview

Infographic Component 7 Preview

Infographic Component 7 Preview

License

You can use and modify the items in this freebie for your commercial projects.

Attribution is not required, but appreciated nonetheless.

You cannot redistribute or sell the source files in this package.

Download

Related Content

About the Author

Freepik.com is a search engine that helps graphic and web designers locate high quality photos, vectors, illustrations and PSD files for their creative projects. Born in early 2011, it tracks and locates free graphic content on the Internet and displays the results in an orderly layout for easy access. Freepik.com is on Facebook, Google+ and Twitter.

The post Free Vector Infographic Design Template (AI) appeared first on Six Revisions.

Continue reading
0
4396

Incorporating web forms into your website isn’t always the easiest thing to do; they often look very sales-driven, and don’t always flow well with your designs.

But we need forms because they are the ultimate way to capture important user-contributed data.

At Formstack (a web app that allows you to create online forms) it’s no surprise we love talking about web form optimization and best practices. Users are more likely to see and complete your forms if they are easy to use and displayed strategically in your designs.

Let’s explore a few strategic form-presentation techniques along with some examples.

Form Page

The most fundamental technique for displaying a web form is to have a dedicated web page for it. Examples of form pages are contact forms and sign-up forms.

People who come to form pages are generally ready to act, or are more likely to do so. For instance, when a user clicks on a sign-up button, they already have the intent to use the form they will encounter because they have a task they wish to complete (i.e., sign up for an account).

For long web forms (like online surveys or e-commerce checkout processes) it would be better to use a form page because they need more screen space. In addition, having a dedicated page will allow the user to focus at the task at hand without distraction.

To be user-friendly and more successful at capturing information, form pages should be as short as possible. When we encounter unnecessarily long forms, there’s a higher likelihood we’ll choose to abandon it because there’s too much time and effort required from us.

Form Page Example

An example of a form page is HealthTab’s sign-up page.

We can see in this example:

  • The form is the most prominent component on the page.
  • There are no distracting, non-essential elements in close proximity of the web form (e.g. photos, links, other calls-to-action, social media buttons, etc.).
  • Text content is limited only to useful information that might help or encourage the user to complete the form. In this case, a promise of a reward: If you complete the form, you will be able to track your blood pressure and BMI.

On-Page Forms

This technique of displaying web forms is good for forms that need to be usable and available on multiple or all pages of a site. Examples of these forms are email newsletter sign-up forms and site search forms.

Unlike form pages where the user has explicitly decided to see the form, on-page forms are presented without the user’s permission. So we must make sure our on-page forms don’t drastically interrupt their experience.

Since we know our users will see on-page forms without prior knowledge about them, we should be extremely transparent when describing the form. Being transparent will help build trust and encourage people to use the form.

On-Page Form Example

We can see an on-page form example by looking at the bottom of Sacha Greif’s blog posts where he has an email newsletter sign-up form strategically placed on the right-hand sidebar.

As we can see from this example:

  • It respects the user’s reading experience by being located off to the right and at the bottom of each blog post, away from the content — at this point of the page, the user has already gotten value from the site (reading a blog post for free) and thus more likely to be motivated to sign up.
  • The form is very short, it only has one input field. We often see email sign-ups asking for our first name, last name and other information, but this form only asks for one thing: A person’s email address.
  • The form explicitly tells users what to expect: A newsletter every Sunday, and we won’t get spammed by providing our email address.

Modal Window Forms

Modal windows are a way to display content on demand without requiring the user to leave the current page.

Modal windows walk a fine line between being useful and being annoying (like popup windows), so using this technique should be used with utmost care.

You can see many sites today automatically showing modal windows as soon as the page loads. While this method might guarantee that you get your message in the face of your visitor, it’s frustratingly invasive.

Allow your users to naturally find what they need through good, honest and thoughtful design.

Bad Modal Window Form

Under Armour, for example, immediately prompts new site visitors with a modal window that contains an email sign-up form.

But is this effective?

As a newcomer to the site, how willing are you to give away your email address to this sign-up form?

While this strategy might gain some traction for your email list, you need to prioritize UX.

Good Modal Window Form

Using modal window forms is a good technique if doing so can provide UX improvements.

For example, Spotify uses a modal window form to speed up their sign-up process.

Instead of the user clicking on their sign-up button and then being directed to a form page, a modal window pops up near-instantly, saving her a few seconds and making the transition to the sign-up web form much smoother.

In the Spotify example, we can see a good rule to follow when displaying modal window forms: Let the user request for the form, don’t force it onto them. This concept is called progressive disclosure.

Off-Canvas Forms

Off-canvas layouts have become increasingly popular in mobile UI design. And for good reason: When a designer is only working with about 2-3 inches of screen space, she doesn’t want to cram the screen with too much stuff.

By placing elements such as navigation menus, auxiliary text and web forms off the screen until the user needs them, we can enhance UX and take advantage of progressive disclosure.

In concept, it’s similar to modal window forms. Where they differ is in execution.

When to Use Off-Canvas Forms

Forms that are suitable for off-canvas placement are those that aren’t regularly used, but are nonetheless essential and critical when a situation calls for them.

One type of form that is well-served by off-canvas placement are search forms.

The common design pattern for search forms is to place them at the top of the layout.

In other words, people expect search forms at the top-right or top-left of the screen when they need to search the site. But these locations are prime real estate that can be used more optimally for more critical elements. Not everyone that visits a web page needs to perform a search, so placing a big search form wastes valuable space in a vast majority of situations.

A good solution that allows the designer to shrink the space a search form takes up is to put it off-canvas until the user asks to see it.

We can see this in Bellroy’s off-canvas navigation menu.

Placing not-always-crucial forms off-canvas allows us to free up screen real estate for more important elements.

When they become crucial — such as in the case when a user is having a hard time finding something specific on a site — that’s when we can show it to them.

Optimize Web Forms for People

Regardless of what design strategies you use to collect user information, make decisions based on your users’ needs.

In business, it’s important to maximize leads or signups. But it’s even more important to keep your users happy.

Where have you found success with form placement in your designs? What’s one of your biggest pet peeves when it comes to lead generation techniques in UX/UI design?

Related Content

About the Authors

Eva McKnight is the PR Specialist at Formstack. When Eva’s not bragging about the awesome ways to use Formstack, you can find her taking too many pictures of her cat or trying to avoid cooking. She loves connecting with other PR professionals and digital marketers. Connect with Eva on Twitter.

Lance Padgett is the SEO Specialist at Formstack where he manages search strategy and strategic outreach campaigns. He also does design and development work too. He loves building things, makes a mean loaf of bread and can talk sports with you all day. Connect with Lance on Twitter.

The post Optimal Techniques for Strategically Displaying Web Forms appeared first on Six Revisions.

Continue reading
0

Testimonial

Thank you so much! We are very happy with our new website. It is easy to use and all of our customers tell us, they love it.

Contact Us

  • 13245 Atlantic Blvd. #4352
    Jacksonville, FL 32225
  • 904-240-5823