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 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.

Entry 12

https://www.nngroup.com/videos/icon-usability/

In this article, NN Group shares a video detailing six UX guidelines that you should follow when using icons in your web development. The first is that you should always include a label for your icon because there are very few icons that have universal meaning. Whereas a simple icon you use for your website might be understandable to Americans, it might lose meaning for people using the website in different countries or who speak a language other than English.

Next, the video mentions that icons should be schematic instead of highly detailed. After all, it is an icon, so it should only be representative of the idea or image, not an actual detailed picture. This is what makes icons work. They are simple enough to be recognized by most members of the intended audience as a sort of “ah, so that’s where I can search for shoes on this website!” A well-designed icon should take little to no thinking to locate and realize what it’s for.

This will be an important guideline to keep in mind when I work between Photoshop and other design programs and the actual web development. It can be easy to get carried away in Photoshop to make a really awesome designed icon, but now I’ll remember to keep it simple, for the most part. What I really should be focusing on is a clear, easily understandable icon.

The next suggestion from the video ties in with this idea of a schematic, purposely unrealistic icon. The next guideline is to design the icon so that it scales well. As technology continues to boom in this day and age, screen resolutions can vary greatly, as well as the screen sizes themselves. Thus, the icon should be designed so that it looks great on a smart watch, all the way to blown up on a projector or TV screen. The way to do this is to design using Adobe Illustrator or a similar program. Illustrator works differently than other typical design workspaces. Instead of blowing up or shrinking the pixels when you enlarge or shrink a design, the designs you make in Illustrator will scale using a mathematical formula so that images don’t look pixelated. This will help when you design icons because they’re typically used on all different scales, not just small.

The final suggestion that struck me was using color and shape accordingly. Color, according to the video, can be more ambiguous, because it won’t really matter to an unsuspecting user what an icon should look like color wise. Plus, a color-blind user won’t see it the same way a person with normal vision does, so you want to make sure that the color of the icon is not the most important element of its design. Instead, the color should work well with the shape of the icon, so that the lines and contours create a recognizable and understandable design.

This final suggestion is important because it reflects on other articles I’ve read and discussed about visual design. Designing for users who may have visual impairments or other disabilities is always important and icon design should be no different. What I’ve noticed is that the same rules for all different branches of web design/development tend to apply.

 

Entry 6

https://www.usability.gov/what-and-why/user-experience.html

When I saw this article on usability.gov, I jumped right into it. Since I’ve taken a course at JMU centered around usability testing, and another SMAD course called “User Experience Design”, I have familiarity with these topics and was hoping to learn more.

What this article mentioned is that all user experience design focuses on one thing: making sure that all experiences for users should be meaningful and valuable. So, information on websites or applications should be useful, usable, desirable to the user, find-able, accessible, and credible. I have dealt with user experience research and design before, but understanding that there are necessary parameters will strengthen my ability to really make a satisfying user experience. There are several sub-categories of user experience design, some of which I’ve touched on already, but in general, the purpose is to make the user more comfortable with a site.

The areas of user experience design I feel most comfortable with are Information Architecture, Usability Testing, and User Research. For a SMAD course, we had to develop the information architecture for a potential app using Axure wireframing software. Axure allows you to make a pseudo-app or website, organizing the most important content to least important as the user would need it, without building the site on the back-end quite yet. It was useful to see how a user would move around and click on a website seeking various content.

In my Usability Testing class, we researched how well a website succeeded with its primary and secondary audiences and doing what it was designed to do. We used Camtasia screen capturing software to watch where users went when trying to complete tasks we created for the website, concerned with important content on a website. As an example, I asked users to register with Crosskeys Vineyard’s newsletter on their website, and evaluated their ability to find/if it gave them any difficulty.

In summary, this article was useful to outline some of the skills in UX design that I’ve already learned a little bit about, and what else I need to learn as I learn to be a better web designer in general.

Entry 5

https://www.usability.gov/what-and-why/visual-design.html

Usability.gov offers a comprehensive and informative perspective on visual design characteristics for good web design. As a sector of the U.S. Department of Health & Human Services, the goal of their website is to provide the cold, hard facts about visual design. Since so much of web design is centered around accessibility/usability concerns, this article about visual design is important for establishing some basic rules.

Primarily, you should always be thinking about the basic elements of visual design: lines, shapes, color palettes, textures, typography, and form. Generally, a combination of these elements will ensure a web page is usable for the largest audience. Lines are important to take the user’s eyes from one piece of content to another, related piece of content. Shapes fall under the same idea, for example, a rectangle that has some images and type contained within lets the user know that all of that stuff is related. Typography refers to the fonts that are chosen, how large the font is, how it’s aligned, etc. You could write an entire article about any given visual design element, but the point is that each must be considered.

Next, in order to bring these elements together, you must adhere to the principles of visual design. The design should be unified, meaning that all content should follow a similar layout scheme, colors, same fonts, etc,. Proper space must be used, meaning there should not be an overwhelming amount of white space, nor should content be jam-packed together. A hierarchy should be built, demonstrating that there are certain elements that are more important than others. Finally, proper contrast should be used. One of the most important principles, contrast focuses on differences in colors, sizes, and directions of elements so that everything can be clearly seen or read.

I think this article will be very useful moving forward with our design projects. You never want to have type that is hard to read against a certain background, or have elements cluttered together just to they fit all on one page. Now that I’ve learned all the considerations that must be made when design visual elements, I’ll be able to craft my websites so that they are both usable and pleasing to look at.

Entry 3

https://www.nngroup.com/videos/f-pattern-reading-digital-content/

The Nielsen Norman Group provides a great resource for all things accessibility, usability, or website design in general. In this article, author Kara Pernice describes what “F-Pattern” design is when talking about reading digital content and why it is an important design consideration.

The “F-pattern” is essentially the track that our eyes take when scanning webpages, articles, or other online content, whether it’s on the web or on a mobile platform. As the name would suggest, our eyes typically move the page in the shape of a capital “F”. We read the most important content at the top corner of the “F”, then move from left-to-right until we are ready to move downward toward the next horizontal line of the “F”. Now, this doesn’t mean there will only be two horizontal scans of a page, F-patterns can go very far down a page.

The important part, though, is why web designers make sure their content is organized in this pattern. As many languages read left to right, web content must be organized in the same way. Even the opposite is still effective, as an example, Arabic is a language that is read right to left, but a reverse F-pattern will work in that case. Generally, the most important, attention grabbing material should be at the top of the F, with secondary and tertiary information, images, design, and layout characteristics going lower. This hierarchy is very typical of good web design and is the basis for designing any page.

What’s so useful about this pattern is it helps for users of the web content to pick out the most essential content in an efficient way. Rather than guessing where to find, say, the “sign-up” link for a website about a charity 5K, users can just move down the F hierarchy until they find it. Users should be able to access all the essential content without having to really think about, making F-pattern considerations very important.