Domnicana Victoria Web Design

So easy , So wonderful, so Domnicana Victoria Web Design

Month: July 2015

The 4 Essential UX Documents Every Designer Needs

When it comes to UX documentation, wireframes and prototypes are certainly among the most important.

But that’s just the beginning. We’ve actually found four other documents to be extremely practical for everyday design. What sets these four apart is that they help designers understand the users, and that more than anything determines the design’s success.

Photo credit: Rosenfeld Media. 

In this article we’ll explain why these easily skipped “supplementals” are really “essentials.”  To learn about 25 helpful design documents and processes, check out the free Guide to UX Design Process & Documentation.

1. Persona

We’ll start with the most telling of user documentation: the persona.

Your personas (limit them to 2-5) go beyond your target demographics. They are fictional personalities based on research which act as a placeholder for your ideal user during the design process. Personas include personal details more descriptive than age or income. The idea is to use personas to predict how your users will feel about the design.

In this role, personas have been proven to drastically improve the final user experience.

Source: Persona Tool

The key to a persona’s effectiveness is in the research.

As described in The Guide to Usability Testing, this research typically includes both qualitative and quantitative testing. Qualitative research like user interviews, field studies, or even a diary study are the best way to understand your user’s thought processes. Quantitative tests like analytics or surveys will complement the more abstract results with cold, hard facts.

Photo credit: Nicholas Wang.

Once you have your research, you’re able to construct an actual persona document. While the sections vary, we recommend each persona (as shown above from our template in UXPin) contain the following:

  1. Photo — Almost every persona includes an image, usually a stock photo. Giving your persona a face greatly helps in thinking of them as a real persona. Choose a realistic photo, so leave out any celebrities.
  2. Profile — Basically, you’ll want to put all the general demographic information here — name, age, etc.
  3. Personality — There is a lot of diversity in this category, depending on the company. It could be a detailed narrative delving into their psyche, or nothing more than a few keyword characteristics like “intelligent” and “ambitious.”
  4. Platforms — Which platforms do your personas use? How familiar are they with each? Which do they prefer and avoid? This is a great place to solidify their webographics.
  5. Goals (Motivations) — Here’s where you include the 3 goals discussed in the tips section: life goals, experience goals, and end goals. Remember that end goals are the most important.
  6. Influences — What other brands and products influence this persona? This will factor heavily into their expectations of your site, personal preferences, and decision-making/behavior.
  7. Likes & Dislikes — Another way to flesh out the persona, this section can be a practical quick-reference guide to optimizing your design for a specific user. Make a list of elements the user would appreciate, and another list of items that would frustrate or annoy them.
  8. Personal Quotes/Mottos — While completely optional, including some personal quotes and life mottos will help you get inside the head of your persona, and therefore your users.

When personas are created correctly, it feels like having an extra person in the room to lean on for design decisions.

2. Empathy Map

Like lightweight versions of personas, empathy maps can be made more quickly and easily in case you’re short on time or resources. Empathy maps strip away the personalities of the persona, and focus only on how the user feels in a given situation.

Source: Tadpull

Tadpull describes the best process for making one, and includes this free template to help you get started.

  1. Setup – Collect a group of test users, or assign a persona to each participant on your team. Then, give each one a separate color of Post-It note.
  2. Pose Questions – Ask a series of seemingly obvious questions, such as “Why do you use this or that site,” or “How do you choose which site to use.” These questions should always be open-ended.
  3. Map Notes – As the answers roll in, scribble your notes and thoughts on your chosen color of Post-It. Apply notes to the appropriate section of the map.
  4. Weed Through Ideas – Go through all the notes and leave only the best and most useful ones.
  5. Take a Break – Allow the notes and ideas to ruminate for a day or two. Try hanging the empathy map in a common space like the break room so it’s not completely forgotten.
  6. Define Goal – See the area on the bottom that says “_______ needs a way to _______ because _______.” Now that you have some insights, fill that in for your target users. Pay special attention to the “because” part, as that will spark critical thinking about why you’re designing.

At UXPin, we actually upload empathy maps into our own design app so everyone can comment and fill in details. If you use Slack or any other collaborative tool, the same trick works.

3. User Scenario

If your personas are the characters of a story, then user scenarios are the plot.

User scenarios revolve around a goal – let’s say ordering a overnight gift for Mother’s Day – and how your user accomplishes it. The facts include where they click, how long it takes, even their emotional responses throughout. Foretelling the user’s processes has lots of obvious advantages to UX and UI design.

Shlomo Goltz. “A Close Look at Personas: What They Are and How They Work (Part 1).”

User scenarios can come in several varieties. For example, your scenario could list out all the technical details, such as a step-by-step list of all the pages the user visited (and how long they spent on each). Another option is to focus more on the feelings of the user, in which case the scenario will read more like a story than a data sheet.

Regardless of which type you decide works best for you, when building your scenario, consider these factors surrounding your user:

  • Behavior – What idiosyncrasies does your user have when interacting with websites? Do they log in right away or when necessary? Are they looking at other websites simultaneously?
  • Motivation – Why does your user want to accomplish this goal? How badly? What are they willing to put up with?
  • Environment – Is the user at work, at home, or on the go? Are they using a computer, smartphone, or other mobile device? Are there any outside distractions?
  • External Factors – How fast is the Internet connection? Are they under an oppressive time constraint, or can they take their time?

Most important, try visualizing your user trying to accomplish their goal. As always, the more thorough your initial persona creation, the more accurate the user scenario will be.

One final piece of advice on scenarios – don’t waste time plotting out every conceivable task. Stick only to the most important ones, and these will give you a better idea of the processes for the less common ones later.

To learn more, check out this excellent guide from UX For the Masses complete with steps and examples.

4. Customer Journey Map

The customer journey map is similar to a user scenario, except it ranges from before and after the experience (not just during). This allows designers to get a fuller context of their product – after all, a user’s experiences begins before they even start using the product and ends later than when they’re finished with it.

The customer journey map draws on the information compiled in your personas, empathy maps, and user scenarios. It’s just a matter of combining the user’s personality (persona) with how they’re interacting with your site (user scenario). Each stage will offer different emotional progressions.

Source: UXPin

In general, a customer journey map can be written in a chart format, like this template (shown above) that we ourselves use at UXPin. For each individual stage of the process, make sure you cover the following areas concerning the user:

  • Goal – What do they hope to accomplish in this phase?
  • Expectations – What does the user think will happen? What ideas are they bringing into their experience, whether justified or not?
  • Process –- How do they hope to accomplish their goal? What are they actually doing?
  • Rating of Experience – How would the user rate each phase of their experience?
  • The Good – What does the user like about this phase? What works well?
  • The Bad – What doesn’t the user like about this phase? Where did problems arise?
  • Improvements – Based on all the previous information, how can you make the user’s experience better?

The amount of detail depends on your company’s size. Smaller companies will want to keep it light, as designers are probably already working closely with the product team. Larger companies can afford to flesh this out more, to ensure the information communicates across departments.

Customer journey maps can even work as a kind of “design audit.” It can be used effectively in anticipating issues before the design process, but also in addressing or analyzing issues in an existing system.

Conclusion

If you’re a designer new to a company, ask if these documents exist as soon as possible. If they don’t, work towards creating them. With these four documents, you can truly understand how the user and the product fit together.

16 Places to Find the Best Free Stock Photos

Good images are a key part of putting together a great website. But finding images to use can sometimes be difficult. Your options are to take the photos yourself, buy images from a photographer or stock image site or to find images that are free and available for use. That’s what we are going to look at here today.

There are a variety of places where you can find free photos that are available for public use. Most of these images fall under a creative commons license (just make sure you attribute properly) or are old enough that the photos have returned to the public domain. (This happens once the copyright on an image expires.)

So here’s a look at 16 places where you can find great stock images at no cost. Happy hunting!

Free Images for Public and Commercial Use

Raumrot

Raumrot specializes in free, hand-selected stock photos that can be used for personal or commercial projects. Images on the site are all available in high-resolution formats. Images are available for use based on each individual photo’s creative commons license and should be displayed according to those rules.

What’s nice about the site is how it is organized. You can search for images by category and the selection of images is nice. Photos modern and vary in composition and scope.

Unsplash

“Free (do whatever you want) hi-resolution photos.” That’s the onus for Unsplash a blog-style photo site that allows you to submit your own images for public use. The site refreshes with 10 new photos every 10 days, so there’s almost always something new to choose from.

The photos on this site include a lot of landscapes to choose from, many with exceptional lighting and almost Instagram-style effects. The site is also just fun to look at. Every photo also includes a link to the photographer if you want to learn more about a certain photo.

Little Visuals

With plenty of options from high-resolution landscapes to tight, detail shots from buildings, Little Visuals has a little something for a variety of projects. Follow the site and download photos individually or register and get seven new images sent to your inbox every week.

This site is pretty new, with just a few months under its belt, but the images are sharp and crisp. Each image is free to use thanks to creative commons public domain dedication, so none of the images have applicable copyrights.

Gratisography

Ryan McGuire of Belle Design has a fun site where he upload new free-to-use photos every week. The images can be used for personal or commercial projects and every image includes a high-resolution version.

The site has a definite vibe to it, with a variety of super-fun images.

Free Refe Mobile Photos

This site has a variety of images – mostly of objects and landscapes – with a twist. Each image was taken using a mobile device. With a nice selection to choose from, these free images can work well for digital projects, but many of the photos might not be big enough to use for print.

The images from Free Refe Mobile Photos have a highly usable nature to them. Many of the photos capture the everyday and can work in a variety of projects.

Jay Mantri

Jay Mantri posts seven new photos to his site each week that are free to use in any way you please. And he wants you to “make magic” with them.

While the style of photos on the site vary, many of them have a rather funky feel, including a series of photos featuring common objects and sunglasses.

Magdeleine

Magdeleine is another site with a selection of hand-picked images grouped to make them easy to find. You can search by subject, mood or color, so if you have an idea of what you need, this is a great place to start.

The image choices are quite amazing and feature a world-feel. Many of the images are color but there is a large selection of black and white photography as well.

Foodie’s Feed

From beautiful deserts to simple garden veggies, Foodie’s Feed has images of almost any edible item you can imagine. The site uploads five (or more) new high-resolution photos per week and collections of multiple images from a single take are included. (This is a great bonus.)

All of the images showcase food in a way that looks delicious – something that is not as easy as it sounds. The site is supported by donations via PayPal button.

The Ultimate UX Design of the Perfect CTA Button

The Importance of Buttons

A button placed in the wrong area of a page, which uses the wrong color, can stop a user in their tracks. The button is meant to direct users into taking the action you want them to take.

If they don’t take it, then the button has failed for one of the following reasons:

  • The button is placed in an area that’s unfamiliar to the user;
  • The color turns the user off or doesn’t stand out enough;
  • It’s not immediately obvious that the button exists.

According to UX Movement, we can categorize all CTA buttons as:

  1. Positive – changes, sends or adds information. For example, a button accompanying a newsletter signup box would send information;
  2. Neutral – no changes are made, or the button takes the user back to a screen (e.g. cancel);
  3. Negative – deletes or resets information.

Consider Color and Contrast

UX Movement points out that you want to have clear color contrast because it helps users figure out what action to take. If your main CTA button blends in too much with the background or looks like any other button, then users will feel uncertain. At best, this will slow them down. At worse, they won’t click.

This is especially important for your users who may suffer from colorblindness. Colors can appear very similar to the colorblind user even when they appear completely contrasting to sighted users.

The red versus green button argument is a good illustration of why you should consider users with color blindness.

Image source: UX Movement

Let’s review the red/green debate briefly. Red typically implies “stop” or “delete” in most people’s minds. But there are those that hold fast that users are more inclined to click a red button over a green one. So the question becomes — which one to choose?

Take a look at the image above. On the left is how someone who can see colors would see the difference between red and green. On the right, look at how a colorblind user views the two colors — both of which appear as very similar shades.

As we described in Web UI Design for the Human Eye, the discrepancy is because red and green appear opposite each other on the color wheel (they complement rather than contrast each other). Faced with this, a colorblind user processing and interpreting the colors probably won’t take the action.

Red and green appear opposite each other on the subtractive color wheel

Image source: Wikipedia

Using red and green next to each other would certainly be a mistake. You’ll also want to consider the background color behind the button. For example, a green button on a blue background will just disappear because the colors are too similar. This effectively cancels out any action the user might take and causes analysis paralysis.

See the image below for a quick color psychology guide to inform your choices. It will depend on the type of site you’re designing  and its brand personality. You should also think about the user and who is likely to be using the site and clicking on the buttons to inform your choices.

Image source: Web UI Design for the Human Eye

So it’s not only necessary to be careful about what colors you choose for your buttons, but it’s important to also ensure that you choose contrasting colors to the rest of the page and for accompanying buttons.

Place Your Button in a User’s Path

Where on the page you place the button is just as important as its color and the text on it or accompanying it.

Buttons should definitely appear prominently on the page.

However, consider the user’s path through the page. As Jeremy Smith points out in this excellent Crazy Egg blog post, buttons need logical placement as to where the user is going to next. You’ll want to consider how people actually read the page.

Let’s take a look briefly at F-patterns and Z-patterns.

The F-Pattern

The F-pattern is the standard for sites with a lot of text, such as news site or blogs. The user’s eyes will scan across the page, left to right, then go left before dropping down and scanning across the page again. In the example below, you’ll want to have your call to action where the eye ends as it scans left to right.

Photo credit: Web Design for the Human Eye

The Z-Pattern

You’ll find this pattern when content is more spacious and the user’s eye will scan the page like Zorro carving a Z. In the example below, you’ll want to place your call to action along the Z line, preferably near the end of it.

Photo credit: Web Design for the Human Eye

These patterns allow you to put the button within the user’s path. After all, you wouldn’t want to bury the button in the footer where no one will ever see or click it. Finally, don’t be afraid to use web conventions — there’s good reason why things are commonly placed where they are, because they work.

Make Buttons Appear Clickable

There’s a few ways to make buttons appear nice and clickable.

Let’s go through some considerations that Gabrielle Gosha outlines in her excellent Sitepoint article:

  • As we said above, color is an important part of making a button stand out. It’s also useful in making a button clickable. If the button blends too much into the background, a user won’t realize that it’s something you can press.
  • Buttons should also contain text that provide the user with further visual clues to direct action. Text can be used to clearly direct the user, such as “sign up”, “join now”, or “get started.”
  • Give the button some room to breathe. When placing a button below a chunk of text, we’d recommend adding a margin that’s roughly ⅔ the height of the button.
  • Sorry, Yoda, but size matters when it comes to buttons. You want to consider how big the button is in relation to the other elements on the page. Too small and it’ll go unnoticed. Too big and it may overwhelm users. And there’s mobile to consider.

Photo credit: UXPin

As you can see in the above illustration, three different calls to action have different impacts. The left CTA is small yet hard to miss; the center is unobtrusive; the right is so large that it distracts from the content above it. Color and size make all the difference.

Avoid getting too artistic when it comes to creating buttons and keep them simple and rectangular in shape. Replacing a perfectly crafted button with clever text or a GIF rarely results in a good experience for the user – it just confuses them as they are faced with something that’s unfamiliar.

As Kamil Zieba stated in Web Design for the Human Eye: “Clarity comes before cleverness.” Don’t use a button label like “Cool, let’s rock it!” if “Submit” communicates the action better.

Make Buttons Rounded Rectangles

Buttons should be rectangular because again, that’s what we’re used to. We understand how such buttons function.

Photo credit: UXPin

According to Paul Olyslager, these rectangular buttons should also have rounded corners as studies have shown that these perform the best. This is because rounded corners draw attention to the inside of the button as they point inwards. It’s also because we’ve evolved to avoid anything with sharp corners as human beings, as they represent a threat of injury.

We suggest that you read Paul’s four-part article for more information on all aspects of button design, including size.

Floating Action Buttons (FABs)

Before we move onto button placement, a quick word about floating action buttons (FABs) which have become more popular in recent years.

FABs are generally circular buttons which ‘float’ above the user interface and are “used for a promoted action”. We’re seeing more sites use them “to represent the single action users perform the most on that particular screen,” says graphic designer Teo Yu Siang.

Image source: Flipboard

A FAB ‘floats’ on top of the regular content and can encroach on other elements, as well as distract the user from the rest of the content.

Siang goes on to point out that while they seem to be a great idea, and provide good UX in ideal scenarios, in reality, widespread adoption of FABs might actually harm the overall UX.

This is because they reduce the immersive experience as they are overlaid on top of every single UI element on the screen. This distracts the user from the overall experience and as such, you should take care when adding FABs to any page as it could be counterproductive.

Not only this, but as Siang says,

“By taking up real estate on the screen, the FAB effectively blocks content.

This isn’t to suggest that you shouldn’t use FABs at all, but you should certainly take care with their use and placement as they can reduce the number of users taking the desired action.

Button tutorial

Creating an effective call to action depends on several factors, including relative size, color, and text. We’ll create a quick example with UXPin to illustrate some best practices we just described.

1. People see the hero first

The largest, topmost elements get the most attention.

2. Their eyes wander downward

Subtitles come next: bits of text that, being less prominent, create a hierarchy of attention.

3. Content moves them along

There’s a chance that people will skip from the subheads straight to the buttons, but often they need to know where each button will take them. The “sales pitch” text explains in detail why users should click each call to action. This content is a promise: What will tapping a button get you?

4. Calls to action

The calls to action themselves occupy the third tier. Why?

  • Contrast: Button backgrounds that stand out against the body’s background.
  • Text: Clean and legible, usually in a sans-serif typeface.
  • Placement: In a nice, even row.

How it works

This pattern takes advantage of Western languages’ left-to-right flow: Because people are already accustomed to reading from the top left to the bottom right, arranging elements that follows conventional thinking feels natural — even if readers aren’t aware of it.

Further Resources

So that wraps up our discussion and tutorial. If you’d like to learn more about creating effective CTAs for good UX design, check out some of our favorite resources below.

  • UXPin– Web Design for the Human Eye (free e-book explaining how to keep users on a site longer with smart visual design. 30+ deconstructed examples from top companies included.)
  • Hubspot – Call-to-action best practices
  • Hong Kiat – 38 CTA templates that stand out
  • Wordstream – CTA button best practices
  • Content Verve – 10 button case studies with real-life examples
  • Impact Branding – 4 creative tweaks for high-value buttons

Material Design Lite A Giant Library of Web Components

Google Developer team recently released a library of components in their Material Design style called Material Design Lite, or MDL for short. It’s a library filled with numerous design components like buttons, forms, and everything else your heart could desire really. They are considering this library to be framework-agnostic in order to make it extremely flexible for people to use. Additionally, one of its key benefits is the fact that it is developed in ‘vanilla CSS, HTML and JS. So far so good.

“Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.”

You can download the Material Design Lite library, on their website. You can also peruse their Github repo.

Simple tech behind the scenes

A key component to this library is the fact that it’s easy to install. That’s a brilliant step one because it would not make for a great free resource if it was difficult to use from the get go. However, the whole library is based on simple markup, hance they describe is as vanilla. The simple structure of the library makes it compatible with many browsers – another plus. It supports modern browsers like Chrome, Firefox and even Microsoft Edge. The library does promise smooth degradation to the more challenging browsers, like IE9.

Material Design Lite Browsers

A big principle in making this library was its flexibility and accessibility across devices and browsers; it’s impressive that they have achieved it. We all know this is important but we can’t always afford the time to make our designs this flexible ourselves; once again, it’s a huge plus for the library.

Take a look a a code snippet for the round flowing buttons. The markup for the library is easy to follow in terms of syntax as well.

1
2
3
4
5
6
7
8
<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>
<!-- Colored FAB button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons">add</i>
</button>

They use great APIs to make the code aspect of the library great, like Polymer for the various paper components and BEM for Sass. If that’s not good enough for you, the CSS can be used by referencing their CDN or imported through npm as well. You know, in case you wanted choices.

A bold idea

I think it’s an interesting idea to share such a library with the world. The previously released Material Design documentation was geared towards explaining the philosophy of their overall user experience and how it relates to user interfaces. It was a document based on how Google goes about creating their own apps. We share our work with each other all the time, we have plenty of UI kits and code snippets being used throughout our work. That’s nothing new. MDL is geared towards sharing their design and letting everyone else take a stab at it; what makes it interesting is the fact that Google is a big company whose aesthetic is very unique.

I’m also having a hard time seeing a company like Apple, which too is know for it’s aesthetics, opening up it’s style for everyone to use. That’s why I think it’s a bold move for Google to freely open up the use of their style actually and I’m curious how it will go about over time.

Easy to utilize

All in all, the setup steps are neatly laid out to be easy to follow. The library itself is actually pretty well displayed on their website as there is a lot you can do without even downloading it. On their site, there is a section dedicated just to components where you can browse throughall the various elements and interact with them yourself. You can even open them in CodePen to edit it quickly and play around it.

Google really though this library though; that’s clear. They provided a whole section designated to colour customization so you can check out to see how their colours play out with each other.

There is even a whole section designated towards the Material Design style that feeds off their Material Design documentation in order to help you understand the design principles governing their visual style. It goes over basic design elements like typography and iconography. You can download zipped file assets too. Like I said, Google Development team give this a lot of thought and it shows.

In order to help us see the potential of MDL, there is a templates section to help spark our creativity. These templates are free for use and are also customizable. They vary from portfolio websites, to stand alone articles. There are only a few of them but who needs an infinite list, anyways? I think the template page was a great idea in helping people conceptualize the ability of the MDL’s capabilities – another smart move.

And now the bad

With everything flattering I’ve already said about the library, I have concerns. As a designer, I don’t want my website to look like a Google app. This to me is concerning. It’s really awesome of them to make this public and free for use but the last thing we need is another set of websites that look the same. It’s unoriginal. It’s not good for design.

Joshua Johnson did a take on this point of view for Smashing Magazine not too long ago either. In an article titled Beyond The Boring: The Hunt For The Web’s Lost Soul, he too points out that too many websites look alike. The lack of originality in terms of style and especially layout is jarring. Joshual Johnson was inspired by Noah Stokes who feels the same way; he’s resentful of the fact that most current designs rely on clear boxes and grids making for uninteresting designs.

As a designer, I consider myself a creative. Now, some design elements will always be reused, like left hand side logos and top navigations. I was much more impressed with Material Design documentation because it provided explanations on why they designed the way they designed. Insight into their philosophy, so that I could learn from it, was not only more useful to me but more empowering. Frankly, I can’t find a single good use for this library as it looks exactly like Google; the library doesn’t provide much creative freedom.

Powered by WordPress & Theme by Anders Norén