Entry 25

https://www.usability.gov/how-to-and-tools/methods/running-usability-tests.html

 

In another article from Usability.gov, the procedures and techniques to conducting a proper usability test are outlines. The article immediately addresses two actions that must be conducted prior to your test, though. It mentions that the test should be completely planned and your test participants should be recruited and ready to meet you for the test. Once these two objectives are met, then you can begin the procedure.

The first thing that must be done is selecting a moderating technique. Though there are many styles for moderation, a popular technique is what’s called the “Concurrent Think Aloud” technique. Utilized heavily by Steve Krug in his books on usability, this style relies on participants sharing their thoughts out loud as the move through the usability test. This can be anything from “oh, I found it!” or “hmmm, now I wonder where I can find the contact page for this shoe store.” The point is, the participants share their real thought process as the move through the various tests, which is useful for the web designer trying to make improvements on the other side.

Other testing styles include “Retrospective Think Aloud,” which asks users to retrace their thought process post-test, “Concurrent Probing”, which involves the tester asking the participant questions anytime they mention something interesting, and “Retrospective Probing,” which involves the tester asking the participant questions once the testing has concluded. There are pros and cons to each one, but as the article mentions, you can’t really go wrong with any of the tactics. What is important, though, is being thorough with the way you record information and allow the participant to carefully run through each task.

Next, you’ll want to run a pilot test 1-2 days before the real test. This will involve testing equipment to ensure it isn’t faulty, practicing taking notes and asking questions, getting a sense of how effective your test structure is, and making any final adjustments.

The final section of the article discusses some of the best practices for a good usability test. Priority should be on making the test subjects feel comfortable, being thorough with both your questioning and tasks for participants to complete, and to take as many notes as you can.

Reading this article was useful. I’ve usability tested before, but this served as a reminder of what considerations I should make when developing a test. It never even occurred to me that there were different test styles, but it’s something I’ll consider modifying the next time I conduct a usability test.

Entry 24

https://www.usability.gov/how-to-and-tools/methods/eye-tracking.html

In this article, Usability.gov’ describes what eye tracking is and how it is useful for the web. Eye tracking is is a technology that allows you to see what a user is focused on when browsing a web page or application and can also track the specific motion of the eye to see what they are looking for.

Now, eye tracking for the web serves several purposes. What’s nice about eye tracking programs is that they can very precisely indicate:

• what a user is looking at
• how long they’re looking at an item
• how their focus moves from item to item on your page
• what parts of the website they’re missing
• how the items on your site or proposed designs are working/grabbing attention

The article then explains briefly how this technology works. The device focuses on the pupil of the users’ eye and is then able to determine which direction it is facing as well as what it is concentrating on. The program then generates data about what movements the pupil is making in real time, creating heat maps and “saccade pathways.”

Heat maps are a great way to visualize all that happens when a user browses a website. Typically, warmer colors like red and yellow indicate higher focus and time spent looking at an item, where cooler colors indicate less focus and less time spent looking. This is useful for a company testing the usability of a website.

Saccade pathways trace the eye’s movement from one place to another in chronological order. It shows using pathways and markers which things a user looks at first, then second, and so on.

The article finishes by noting some of the best practices for using eye trackers and testing for usability. It mentions that the testing environment should be comfortable for the participants, that it shouldn’t be too lengthy/overwhelming for the participants, and should include specific instructions to ease the process.

I found this article to be interesting because we discussed these methods in my WRTC 456 class, Usability Testing. While we did not use eye trackers, we discussed what content should be the most viewed and were always conscious of this when testing various sites.

Entry 23

https://www.usability.gov/how-to-and-tools/methods/parallel-design.html

In this piece from Usability.gov, the idea of parallel design in web development is explained. The idea is that you assemble a team of designers who create an initial design from the same set of requirements. Each designer works totally independently of the others, and when the design is finished, each one presents their design to the others. Each design is considered, and the best element of each design is used for the overall project.

As you can imagine, the parallel design method is great for funneling many ideas, some that are good, and some that are bad, into one place to work toward a team goal. It’s quick, cost effective, and the concept development schedule is condensed as a result.

Now, there are some tips to make parallel design even better for your team. Usability.gov outlines some of the best practices to helping your team with parallel design.

• Define which layouts to address
• Clarify the expectations regarding fidelity of the designs
• If using a team approach, be sure your team members have a mostly similar skillset
• Establish a sound evaluation criteria of each design.

The article mentions that this a proven technique. Each team member can draw ideas from looking at other team member’s designs. Even if someone design’s a really poor product, there’s always at least a slight improvement for this person because they’ll receive advice from the rest of the team. In fact, in a case study “Improving System Usability Through Parallel Design” (1996), it was found that there was an improvement in site usability from v1 to v2 of 18% with iterative design. The same study found a 70% leap from v1 to v2 with parallel design.

This article struck me because if I ever make web development into a career for myself, I imagine I’ll be working with team members. Knowing that team-oriented projects typically have greater success than trying one version after the other with no communication comforts me. Even when I’m in the lab working on coding projects, I’m always bouncing ideas and questions off peers that are there with me, and vice-versa. Even if the advice might not make sense for my site or theirs, it’s good to open a dialogue so that everyone can benefit.

Entry 22

http://www.visualswirl.com/articles/dont-reinvent-the-web-design-wheel/

In another piece for Visual Swirl, Chris Thurman discusses a problem with web design. Too many developers try to do too much, and don’t focus on tweaking the site in delicate, precise ways. He mentions conventions, the typical rules in web design, or in life really, that we expect to see and help us use any site or product. These can be things like street signs on corners, stop signs, or north being at the top of any given map.These conventions are kind of like the unwritten rules of the world, and they exist on the web too. For example, a logo being on the top left of a page, finding contact information at the bottom of the page, or primary navigation going across the top of a page, are all web conventions. Whether it’s to challenge themselves or to make a really unique design, doing so can lead to problems.

So, why should a developer adopt these conventions? Well, because to most users, they are useful. A convention cannot become a convention until it is usable to an audience. This is why so many websites follow a typical layout. It reflects one of the most powerful ideas of web design, that users shouldn’t have to think when using a website and all content should be self-evident. Break these conventions, and your users may become frustrated and leave your website.

Of course, you don’t have to follow every single convention. It’s okay to be think outside the box every now and then, but just do it with a reason. Thurman says that if you break a convention just for the sake of being different, you’re better off just not doing it. If you’re doing it because you think you’ll get more traffic on your site, it will be even more helpful to users, and the like, then sure, try it. Just be careful.

I found this article to be a good take on web design in general. Since I consider myself an absolute beginner on the subject, I’ll be following basically as many conventions as I can, at least for now. It’s much easier to follow design elements that are grounded in good web design than to try to go outside the lines and change it up. Perhaps when I get much better at coding I’ll be able to design my own conventions in a way that is cool and useful to my audience, but for now, I’ll be playing it safe.

Entry 21

http://www.visualswirl.com/articles/redesign-vs-tweaked-design-whats-best-for-your-website/

Chris Thurman’s article for Visual Swirl magazine addresses a frequent question in web design when adjusting a website: should I do a sweeping redesign, or make calculated, simple tweaks? To Thurman, many designers often choose the first choice as it’s sometimes easier to make a fresh start. However, as he says, “all that new and clean doesn’t necessarily equal success.” It can be tempting to want to try a whole new interface, images, logos, etc., but designers can sometimes find themselves overwhelmed.

So, what this article tries to address is when it is appropriate to a complete redesign, and when it may be better to just tweak the current design. That said, the article mentions the two schools of thought when going through this process. First is redesign. A redesigner is mainly focused on the look of the website; this can include things like graphics, logos, color scheme, really anything that doesn’t affect the purpose of the website. This philosophy also concerns itself with a rebrand in an attempt to stay trendy or draw more attention to the website. In other words, the redesign process is kind of like trying to make the website “more hip.”

Then you have realign. A realigner is really interested in the needs of the user on the website, and does well to remember that a website and its design serve a purpose of more than just looking good. The realigner will try their best to understand what works on the website and what doesn’t work. From there, the realignment process can begin to address any issues with the function of the website.

So, it seems like both philosophies have their pros and cons, so Thurman suggests you do a little bit of both in any redesign process. He says “a better and easier-to-use website should be your goal.” A website can look great and work well. That said, the article does say to try and prioritize the ideas of a realigner over redesigner.

So, if you are just going to tweak the design, there are several points listed that will be helpful.

1. Maintain brand strength- if images, logos, etc., are outdated, update them.
2. Don’t disorient your audience- Keep navigation and links mostly the same. Users who are adjusted to an interface won’t like if a certain item isn’t where it used to be.
3. Determine essential and non-essential features: As web design goes, if something isn’t needed you can probably get rid of it.
4. Time = money – Rather than taking the site down for a period of time for a redesign, remember that this time could be spent interacting with clients.

So there are some useful tips to making some simple changes to a design. If you have decided to do a complete overhaul, there are also a number of tasks you can do to redesign a site:

1. Improve user interaction
2. Make room for useful features- as mentioned earlier, get rid of the stuff you don’t need and instead give way to content and elements that will really be useful to users.
3. Stand out in the crowd- make a unique design that pairs with the unique purpose or message of your site.

I thought this article was really interesting. There are plenty of websites, typically local ones, that I look at and wonder why they don’t make any changes. Well, it’s because the decision to change, at any scale, is a big one. An entire redesign is probably a very time-consuming and expensive process. After reading this piece, I now appreciate when a site updates its design and still works well, or even better than before. I still wonder why Craigslist won’t change, though.

Entry 20

https://www.nngroup.com/articles/service-design-101/

Sarah Gibbons article on Nielsen Norman Group gives a nice overview of what service design is. In summary, service design improves the experiences of both the user and employee by designing, aligning, and optimizing an organization’s operations to better support customer journeys.

Gibbons moves on to explain what exactly distinguishes a service from a good. A good is a real, consumable thing, like a laptop, or a pair of sneakers. Services, on the other hand, are the instantaneous exchanges that aren’t measurable or necessarily physical. So things like public transportation, mail delivery, a doctor’s appointment, or getting your car examined – those are all services.

What’s interesting is that with the advent of the technology boom, there’s kind of a gray area between service and good. For example, we can access a song on a streaming service, so it’s kind of a product… but we don’t really own it. We pay the streaming service a monthly fee to listen to this song, so it’s kind of a service, too.

So, with that in mind, we have to design for services versus goods online. Service design, according to the article is “the activity of planning and organizing a business’s resources (people, props, and processes) in order to (1) directly improve the employee’s experience, and (2) indirectly, the customer’s experience.

The components of service design are as follows:

• People: anyone who creates or uses the service, plus people who could be affected by the service
• Props: the physical or digital artifacts that are needed to perform the service successfully (like a conference room, or a storefront)
• Processes: any workflows, procedures, or rituals, performed by employees or users of a service.

So, there are a number of parties and elements we need to satisfy for proper service design. Since there can be some blurriness to services, especially online, designing with these considerations is important. I enjoyed this article because it defined something in a way that I hadn’t really thought about before. Services are all around us, sometimes we might not be aware of, so elegant and useful design for them is just as important as a physical product as well.

Entry 19

https://www.nngroup.com/articles/group-ideation/

Kate Meyer’s article on Nielsen Norman Group discusses some ways you can improve your website/pages to better consider UX concepts. The issue with so many design teams is that groups inevitably get formed, and can impact collaboration ideation. Too many groups in the mix can cloud the main goal of the project, so focusing on getting as many ideas as possible can minimize these negative group effects.

The first step here is to recognize the problems that can arise with group work. It is in our nature to really like the first idea someone pitches (called the Law of Primacy in Persuasion), so we have to remember this and not treat the first suggestion for anything as better (or worse) than any additional ideas. This is called groupthink and cause group ideation problems as mentioned earlier.

Next, groups should try to always divide the work between the individual members evenly. Many different factors can cause the problem of one member doing too much or too little work, but experience, personality type, and seniority are typically problematic. Ways you can fix this issue is to focus on quantity over quality. I know this sounds weird since in life we typically pursue quality over quantity, but in a team environment, you want to be looking for a lot of diverse ideas. Teammates who pitch a “bad” idea shouldn’t be criticized or forced out, but rather, they should be taken seriously. It’s better to have 10 or so okay ideas instead of two good ideas and no other options.

The final issue with group ideation is the tendency to for groups to form hierarchies. Related to groupthink and unequal contribution, this can happen naturally, or when a presumed “higher up” is invited to work with the group. The ways to amend this issue are to 1. consider not inviting these superiors and to 2. hold a pre-session session. What this means is to hold a separate small session with lower ranking members before presenting to higher ups. This won’t cause the tension associated with hierarchy issues and should keep things moving slowly.

I thought this article was really different and interesting. For a lot of this inspiration log, I’ve been only thinking about myself working on projects, and this article reminded me that in the real world, it’s pretty unlikely that I’ll be working solo on much work. Learning what kind of troubleshooting to do when group issues arise will be useful in the future, for any of my design classes and hopefully the real world after I graduate.

Entry 18

https://www.smashingmagazine.com/2017/09/new-font-technologies-improve-web/

Francois Poizat’s piece for Smashing Magazine discusses the new font technology on the forefront that will make the web a better and more usable place. Last year, Microsoft, Google, Apple, and Adobe, some of the biggest companies in tech, announced they would all be using OpenType standard, called variable fonts. The idea is that it gives much more control to the user, giving them the ability to modify the typeface depending on context and device.

These variable fonts are supposed to “revolutionize” the responsive web. They will allow for far more customization as far as shape, sizes, and typefaces go. This open source software for typekits and font families will be usable for all and allow designers to really customize their pages and content.

One cool feature of this new font technology is what’s called parametric fonts. These are fonts that can be manipulated by different parameters, say, in CSS or JavaScript. Now, this idea isn’t entirely new, in fact, it was introduced some 40 years ago, but implementation of parametric fonts paired with the OpenType standard has opened the floodgates to type customization.

The remainder of this article shows some applications you can download to play around with parametric fonts. For example, “Prototypo” lets the user import a type kit or font family, and then add their own parameters to demonstrate how that particular parametric font will work on the web. It’s a really neat way of seeing how certain type will look before you make it go live on a web page.

And that’s the very nature of web pages, anyways. The difference between print type and web type is predictability. With print, we know what typefaces will look like because we understand DPI, printing mechanics, and just how it will scale and appear on a physical piece of paper or material. On the web, especially with responsive design considerations, there can be some unpredictability when laying out type, especially when using many different typefaces and fonts.

The whole concept of this revolutionized source for typekits is that we can very precisely use all different sizes, styles, and colors of fonts. Thanks to Apple, Google, Adobe, and others, you and I will will soon be able to create web pages with really beautiful fonts, with no issues.

This article was a little abstract to me since I never really thought of the problems associated with displaying font on the web, but it did make me think. Print and web design do sometimes feel similar, but after reading this, I  know now how many factors go into creating a good looking and readable font.

Entry 17

http://www.printmag.com/color/brief-history-color-wheel/

Callie Budrick’s article “A Brief History of the Color Wheel”, from Print magazine discusses the origins of the color wheel- one of the most essential tools for art, design, and eventually, computer graphics. The origins of the color wheel go all the way back to early man, nearly 40,000 years ago, when they created pigments made of organic materials. Though this first color palette was limited to just red, yellow, brown, black, and white, it stood as the way to consistently mix and use the same colors for various designs.

As man evolved, more and more pigments were added as techniques for creating colors from natural materials were refined. Eventually, we get all the way to the true invention of the color wheel, by none other than Sir Isaac Newton. He noticed that white light reflected off of a glass prism created a spectrum of colors, with different hues as you looked left to right, or vice versa. It was at this time that he believed these hues had a relationship to one another. He arranged each hue with a corresponding musical note, put these colors on a rotating disk, and then suddenly, he had a color wheel. The method was unconventional, but he had created the most important tool in color design.

Today, we can use a real, physical color wheel when choosing paints for houses, or for art projects, but now, the wheel has moved onto an online space as well. There are dozens and dozens of online color wheels and pickers, but typically, you simply hover your mouse over the desired color and a window will appear, telling you exactly which tint or shade of a certain color you have. Color is a complex thing – there are many considerations that go into creating one and picking one. But with the advent of the color wheel, it makes it easy for web developers to choose an elegant and accessible color scheme for their websites. Color wheels will usually tell you the RGB code, CMYK code, and hexadecimal code you can put into your CSS that will automatically make content display in that color. It’s very useful, and we have our early ancestors, and of course Sir Isaac Newton, to thank for that.

Entry 16

https://www.usability.gov/what-and-why/content-strategy.html

In another useful article from Usability.gov, this piece outlines how we as designers can outline content in a way that is useful and usable. Several considerations are taken, such as planning, creation, delivery, governance of content, and more, to ensure that a website is well structured and pleasing for all users.

The article starts by explaining the two main areas of content strategy: content-oriented components and people-oriented components. In content-oriented strategy, we want to start by identifying goals and substance. This means we focus on what content is going to be used to execute the main ideas of the site. In this state, we focus on basic site architecture, site audience, the style of language used, and the mood the content will evoke. On the other side, people-oriented components begin with outlining the roles of team members and establishing their workflow. If everyone understands their job in creating the deliverables, the project will be better.

In either case, the next steps follow the same path. Erin Scime in this article defines the five stages in what she describes as the “content lifecycle”

1. Audit and Analysis: content stakeholder interviews, workflow, brand definition, evaluation of content environment, etc.
2. Strategy: determine topical ownership areas, sourcing plan
3. Plan: content management system customization, metadata plan, migration plan
4. Create: stage where content is actually produced, SEO strategy, quality assurance
5. Maintain: plan for auditing, advise the client, determine targets for success measures.

The article is summed up with some of the best practices for creating meaningful content. All content should be up-to-date, and remain factual. The client should trust any content they browse. It should be consistent, navigable, and be useful at all times. And lastly, the content should be communicated in a way that is understandable for all. Users should have no trouble understanding what it is they’re doing on the website.

A lot of what I read in this article is reflective of the concepts in Steve Krug’s books about usability and web design. He always insists on being understandable to the user, and that it should always make perfect sense without much thought. Usability.gov’s article adds a more professional angle to these concepts, which makes some of the things more tangible and executable when it comes time to plan content.