Color: An Infographic

 I hope all of my United States readers had a Happy Thanksgiving! I certainly did, but without internet I was unable to post what I wanted to. Which is a shame, because I had intended to make this post last Wednesday... I guess even the best laid plans do go astray sometimes.

Color is an incredibly important factor when creating any design, but it's hard to decide on which colors are truly "usable" without knowing some background information. I've put a lot of work into this infographic over the past week and a half or so in hopes that I will be able to explain some of the more important aspects to think about when choosing colors for your design. So without any further ado, here it is! (sorry it's kind of huge)

Reviewing Personas and Scenarios

Sorry for the delay, I've been quite overwhelmed with life lately! Last time I posted, I received some feedback that I had perhaps not been clear enough with my wording, so I'll try to clarify exactly what I meant as well as add some new information I've found.

User Profiles are sets of user data, gathered through polling your users directly. This is the data you will be using in order to create your personas.

Personas are, shall we say, your "average" user- taking the ages, genders, and other relevant information about your users from your set of user profiles, your persona's attributes are decided through averaging. For instance, if your users are predominantly male, your persona should be, too. And if your users are typically middle aged, the age of your persona should be a number that reflects that fact. (If you don't have any research on your users, try and guess who your biggest userbase is going to be.)

Scenarios, or what engineering students might recognize more easily as use cases, are lists of steps your persona must do when trying to reach a particular goal. Writing out these steps might seem tedious, but

There are two reasons for which personas are created:

- In order to empathize with your users; by creating a persona with a name and face, you can put yourself in their shoes much more easily than by simply addressing a user. Naming personas is mostly only necessary when you anticipate a need for several personae, but it also makes them seem more human- and the more human they are, the more easily you will be able to empathize with them.

-To be used in Scenarios. This is important because you need to be able to imagine yourself as someone else as they explore your design.

Here are some examples that I've created for the website I'm creating for myself-

Jessica Daly is a 28 year old recruiter who spends her time looking at the portfolios of recent college graduates and tries to place them in jobs that suit them. She is an experienced web designer as well, and navigates the internet with ease.

Scenario: Looking at Portfolios
Jessica has been directed to Elle's personal website through a business card, and is interested in looking at the most recent work in her portfolio.
1. Jessica loads up Elle's website and sees simple navigation on the side as well as a navigation bar at the top. She clicks on the link that says "Portfolio".
2. A new page, similar to the first but with images for content, appears. There are several thumbnails arranged clearly by year, and the most recent images are placed at the top. Jessica clicks the first thumbnail from the left.
3. The thumbnail expands to show a larger resolution image of the thumbnail. Now intending to exit, Jessica clicks the X at the top right hand corner of the image's border and closes the expanded image.

Simple, right? But I've gotten a lot of the rough facts laid down by working through it this way. By working it out like this, I now know how I want to have my portfolio page laid out, without even drawing it- and I also know that since my target audience is mostly recruiters, I should probably have my portfolio as one of the first links on my page.

Personas and Scenarios: From Hypothetical Situations to Reality

Before you begin designing your website, it is important to have some method of anticipating your user's needs. But who are your users? How will they interact with your website? Asking yourself these questions helps, but in order to ask more concrete questions, creating personas becomes a necessity.

A persona is a character that has all of the traits of an actual person, except these traits are chosen in order to reflect the website they have been designed for.

Essential traits include:

• Name
•  Age
• Gender

Don't forget to find a picture to represent your persona! Personas should be as representative of real life as possible, and having a photograph to tie to each persona's details helps make the persona seem more like a real person.

Personas can also be used as the main characters in scenario writing, a commonly employed usability tool. Scenarios are written examples of your persona's attempts to fulfill their goals through your website, and are created in order to lay out each interaction. Doing so allows you to plan out your website in great detail, and also allows you to immerse yourself more deeply into your persona's character.

To summarize:

• Personas should be detailed fictional characters who share traits with your users.
• Scenarios should be created around each persona's interaction with your website (whether you have created a design for it yet or not)

In my next post, I will detail some of the features your users have that are important to address in persona creation.

Introduction to Usability

Are you an amateur (or professional) web designer looking for ways to improve your web designing? Well, you've come to the right blog. Usable Design Made Easy is a blog created with the intent of educating web designers in techniques that will make your websites... well, usable.

But what is usability, exactly? According to the International Organization for Standardization, usability is:

"The extent to which a product (in our case, a website) can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use."

Effectiveness, efficiency, and satisfaction. These three attributes are key factors of any great design, and to know how to implement them properly requires research. Luckily, there is an abundance of usability research, to the point where there are blogs with hundreds of posts about usability; unluckily, the information out there is not organized well. This blog will attempt to organize information that can be readily applied to web design in a linear manner.

Things to know:

• This blog will be written in a tutorial format. Posts are meant to be read in chronological order, but will also be titled in such a way that readers can easily access the steps at their own pace.
• This blog will not explain web design tools such as HTML, CSS, or image manipulation software. Readers should already have a basic knowledge of the tools necessary to create a website. If you are new to web design and would like some more information on these, please refer to these resources:
• W3Schools : A website containing comprehensive information on HTML, CSS, and other web coding languages. 
• GIMP : A free image manipulation site. Tutorials for use can be found through the GIMP website, as well as through sites such as GIMP-Tutorials.

 Further reading for usability and web accessible design can be found readily here:

•  Usability.gov : An educational website containing well organized resources on usability.
• Jakob Nielsen's AlertBox : The blog of one of the most well respected usability professionals. 
• User Interface Engineering : A diverse website with its own usability blog, podcast, seminar database, and events.