Satisficing and Web Users

In chapter two of his book, author Steve Krug uses a word that might appear as though he is trying to use another word and just can't spell. That word is "satisfice," and yes, he spelled it correctly. So what does Krug mean by the this strange word, you may or may not be asking yourself? He refers to the phenomenon that occurs when a user visits a particular webpage and is faced with several options of where to click first or how to go about navigating the material presented, satisficing is choosing the first reasonable option that pops into the users head. Most of the time, this option is NOTHING like the one that the web designer had in mind for the user, whom that designer has wrongly assumed will navigate around and read the entire page before making a decision. But as Krug points out, users don't have time for that. Particularly with a medium such as the internet, users are looking for quick information, they're not logging on to read entire websites unless it is the news, or in the case of most young people today, their Facebook newsfeed. Therefore, while the "satisficing" decision that a user makes is not necessarily the right one for the information desired, it is the way users use the internet, and web designers need to be aware of this fact when designing web pages.
.
.
.
As soon as I read about "satisficing," I immediately thought to myself, "oh my gosh I do that all the time!" I do it with print media when I get a magazine and see an article on the cover I want to check out, flip to the section that my mind believes the article should be in, find out it doesn't exist there and have to give in and look at the table of contents. But I also find myself doing it on the web. Last week, I wanted to get some new shoelaces for my L.L. Bean boots. So naturally I visited the company website and immediately clicked on "footwear" tab at the top of the page. Rather than wait for the fly out menu that gave me specific options, I went with the first reasonable choice: click the button. This took me to a pictorial menu with a lot going on, so I looked for the accessories button. This took me to socks. I got pretty fed up with trying to "muddle" through the website for shoelaces, so I finally just searched in the company search bar for the item I needed. This would have been the logical choice from the start, but of course I went with what my mind told me would be the most reasonable option. I think that the most reasonable thing the web designer could have done differently to make my visit less of a hassle is:
a) Make the fly out menu repeat after clicking the button, rather than giving me a bunch of pictures with various types of footwear
b) Make shoelaces part of the accessories button under footwear rather than under general accessories. 

The value of CSS

When I look at the current state of my "About Me" site, the only thing that visually resembles me or my personality is my photo. The blue links, black body copy and questionable typeface tell a visitor to my site nothing about me as a person, and only quite negative things about me as a graphic designer. This is one of the values of CSS. It allows a visitor to a site to get an immediate feel for the product, service or information that he or she has used the Internet to research. While content is obviously very important, aesthetics are the first thing a visitor to your webpage will see, and from there he or she can decide whether or not to dive into your content. While I believe this is the greatest value of CSS, there are several other reasons to use them:

1) You don't have to edit individual elements in a site, you can create a whole bunch of different style sheets for your site and then try each one to streamline the process of changing the appearance of your website. You only need one style sheet per website. 

2) You can taylor user experiences based on device. For example, you can control how someone views your website on a desktop browser and a mobile device. Making your website mobile device friendly is almost a requirement in the age of the smartphone and tablet. 

3) Rest easy knowing that your website is going to look the same if viewed in Internet Explorer, Safari, or any other browser. This ensures that users will get the same visual experience that you create in CSS no matter what. 

.

.

.

Here are a few ways that I would like to change the appearance of my personal "About Me" website:

1) Change the typeface used! I discussed how questionable and somewhat ugly the HTML default typeface is above, so I would like to use CSS to change the typeface to a more modern sans serif.

2) Change the color of the typeface. I would like to tie in some of the colors in my current photo that I chose and apply them to the body copy typeface as well as change the color of the links in my body copy. 

3) Put my photo off to the right and my body copy sitting next to it on the left. Since I'm looking to the left in my photo, I want my text to sit to the left of my photo to tie the homepage together into a visual package.

4) Style my social media list horizontally across the bottom of the page with icons for each outlet.

5) Create a drop cap on the first letter of my body copy on my homepage. 

Interactive Media: What is semantic markup?

Semantic markup is really pretty basic to understand, and should really be used intuitively, without needing a definition. But if we needed to give it one, we might say that semantic markup is giving the different elements in an HTML document a markup that most closely matches the meaning of those elements. For example, if you were marking up an HTML document for a newspaper article, you would want to be sure that the headline of that article gets an <h1> tag. Because it is the most prominent aspect of the document, it should be the first to grab the reader's attention, and therefore the largest. Next in order of significance, you might want to call attention to the byline, and so on and so forth as you describe and give importance to the various aspects of the document. 

Semantic markup makes sense not only for hierarchy, however, but it also makes the document easier to read, and creates a "nesting" of elements that will make it easier and more streamlined to add CSS to later. Additionally, it makes it easier to find and make mistakes if the document is semantically marked up and allows other web developers to share work on a document more easily and efficiently. 

.

.

.

Unlike semantic markup, "class" vs. "id" attributes can be somewhat confusing. The most important thing to remember, is that you can only use one "id" name per HTML document. Think of it as something identifying where you are at any one given moment. If that map is an HTML document and the "id" attribute tells you where you are, then it only makes sense that (unless you have superhero powers) you can only be at one place at a time on a map. The "class" attribute, on the other hand, works a little bit differently in that you can use them multiple times in an HTML document as well as multiple times on an element in an HTML document. Therefore, you can apply style rules to multiple elements with the "class" attribute, unlike the "id" attribute. This may or may not make your life easier depending on what you want to do with a particular element. It is also important to note that there can be both "class" and "id" attributes in the same HTML document. 

"Every designer...

or photographer

should have an ongoing

conversation with 

the word editor - -

you are all journalists."

-Roger Black

.

.

.

Refreshing to hear 

journalist

and 

designer

in the same sentence. 

.

.

.

rad booksheld via Niko Economidis Design

Fitting for today...

so I'll just 

play this song

70+ times

on repeat

and practice my 

drawing skills.

.

.

.

photo via observando

The Today Show...

recently claimed 

that the top five "useless majors" are:

1) Fine arts

2) Drama and theater arts

3) Film, video arts

4) Commercial art and graphic design

5) Architecture

.

.

.

I would be interested to see 

how much you enjoy your lives

if we didn't exist. 

.

.

.

photo via Mon Monde

Interactive Media: Web vs. Internet

Although the words "internet" and "world wide web" or "web" for short get tossed around as if they are one and the same, each has a particular function that is best described by saying that the web is an aspect of the internet. Where the internet allows files, documents, etc. to be shared between computers in a community type environment, the web is one channel that allows information to pass between computers.  The web uses hypertext links to transfer various bits of information across the internet, and thus has its own special language to do so. This is called HTML, or hypertext markup language. Thus, in short, the internet can exist without the web, but the web could never exist without the internet; the web is one aspect of the capabilities of the internet. 

.

.

.

After looking at the Happy Cog website, one can begin to identify the HTML components of the page. While the overall design of the website is handled by the CSS aspect of the design, the structural elements of the page are handled by the HTML.  Five of these components are:

1) The Happy Cog logo, which is a graphic element linked into the document. 

2) The title of the page, "We are Happy Cog," which is likely handled with an <h1> tag. 

3) The paragraph that describes the Zappos article, which is handled with a <p> tag.

4) The Facebook and Twitter buttons at the bottom of the homepage are handled by <href> tags that link the text to a specific webpage. 

5) The bolded words in the paragraphs that say "read more" have more emphasis that is handled by an HTML tag that tells readers to click that particular word or group of words for more information or access to a link to a full article.