When Bad User Experience is Embarrassing

Posted November 21st, 2011 in User Experience by deconspray

Restroom signage

Where would you enter the restroom?


I admit it … I’m a user experience geek. And at times, I can drive my wife nuts.

On a recent shopping mall outing, my wife and I paid a visit to an upscale department store, just to use the facilities (of course). While waiting for my wife, I observed a major user experience flaw. What made it so amazing is the this upscale retailer prides itself on its presentation. As men and women entered the restroom lounge area, over 70% of them appeared confused as to the location of “their” restroom. Several men were seen entering the women’s restroom in error. Not to be outdone, women were seen stepping into maintenance closets and service areas. Yet there were signs marking each restroom by gender. So why the confusion? Hadn’t the retailer done enough?

Continue Reading »

Gaining Insight for Website Improvement

Posted October 10th, 2011 in User Experience, Web Design by deconspray

This topic was presented at the October 2011 Chicago Web Professionals Meetup.

Beginner JavaScript – Chapter 6 – Variables

Posted September 8th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

What are Variables?

The sole purpose of a variable is to store a value. The reason why it’s called a variable is the value can change at any time within the JavaScript application. Variables are used throughout programming with JavaScript, there’s just no escaping them.

Before you can use a variable, you must declare it. To declare a variable, you use the var (for variable) keyword, followed by the identifier (or variable name).
Example:

var variablename
var totalCost

You can declare multiple variables in one statement by separating them with commas.

var totalCost, preTaxCost, taxAmount

Once a variable is declared, you can assign it a value. To assign a value to a variable, you use the assignment operator (=). Example:

lastName = Deacon;
totalCost = 120;

A shortcut (and the typical way developers write code today) is to combine the declaration and assignment all in one statement. Example:

var lastName = "Deacon";
var netTotal = 120;
var tax = netTotal * 8.5%
var totalCost = netTotal + tax;

In the first example above, the text string “Deacon” is assigned to the variable lastName (text strings are always enclosed with quotation marks). In the second example, the value 120 is assigned to the netTotal variable. In the third example, the variable tax is assigned the value assigned to the variable netTotal, multiplied by 8.5 percent. In the last example, the values of the variables netTotal and tax are added together, assigning the resulting value to the variable totalCost.

Confused? Good (based on the fact you answered no, of course).

Following are the various assignment operators (yes, there are more than just =):

  • = Assigns the results/value on the right to the variable on the left.
  • += Adds the results/value on the right to the variable on the left.
  • -= Subtracts the results/value on the right from ythe variable on the left.
  • *= Multiplies the variable by the result of the expression.
  • /= Divides the variable by the result of the expression.
  • %= Stores the modulus of the variable and the result of the expression in the variable.

Note: If an expression contains both a string and number, the number is converted to a string before the expression is processed.

Here’s some examples of common scenarios where these expressions would be used.

var total = 23.95;  -  the variable total contains the value 23.95
grossTotal = total += 76.05; - the variable grossTotal contains the value 100.00
var firstName = "Dennis";
var lastName = "Deacon";
var name = firstName + " " + lastName;
var fullName = "Dennis";
fullName += " ";
fullName += "Deacon";

Beginner JavaScript – Chapter 5 – Expressions

Posted September 7th, 2011 in Javascript, Web Design by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

Expressions are operations on numbers or text strings.

Numeric Expressions

On numbers, you typically perform arithmetic operations, such as addition, subtraction, multiplication, division, etc. To code an arithmetic expression, you use arithmetic operators to operate on two or more values.

Examples of arithmetic operations:

4 + 3
9 * 5
12 / 2

Arithmetic Operators

  • Addition (+): 2 + 3
  • Subtraction (-): 5 – 7
  • Multiplication (*) : 8 * 4
  • Division (/): 12 / 6
  • Modulus (%): 12 % 5
    This operator calculates the remainder of two numbers. Example: 13 % 4 is 1

Two other operators used to increment/decrement are:

  • Increment: (++): counter++
  • Decrement (–): counter–

Numeric expressions follow an order of precedence, based on the order.

  1. Increment Operator (++)
  2. Decrement Operator (–)
  3. Multiplication (*), Division (/) & Modulus (%)
  4. Addition (+), Subtraction (-)

Another way to create precedence is to group expressions with parenthesis.

2 + 4 * 6 = 26 Multiplication is performed first, followed by addition.
(2 + 4) * 6 = 48 Addition grouped by parenthesis is performed first,
followed by multiplication.

String Expressions

The purpose of string expressions is to join, or concatenate text.

Examples of string operations:

"Dennis " + "Deacon"
"Go to the store and bring me some " + "ice cream."

Beginner JavaScript – Chapter 4 – JavaScript Data Types

Posted August 11th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

There are three types of data in JavaScript:

  • Number
  • String
  • Boolean

Continue Reading »

Beginner JavaScript – Chapter 3 – JavaScript Identifiers

Posted August 10th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

JavaScript Identifiers are names; names that you give things in JavaScript. These JavaScript “things” include

  • variables
  • functions
  • objects
  • properties
  • methods
  • events

Like much of JavaScript, there are rules to be followed.

  • Identifiers can only contain letters, numbers, underscore (_) and the dollar sign ($).
  • Identifiers cannot start with a number.
  • Identifiers are case-sensitive.
  • Identifiers can be any length.
  • Identifiers can not be the same as JavaScript reserved words. (See list of reserved words)
  • Don’t use global properties and methods as identifiers (more later).
  • Don’t use words similar to reserved words.

When naming an identifier with two words in it, it’s a best practice to use camel case. With this convention, the first letter of each word, excluding the first word, is uppercase. Example:

firstName
myCommonVariableName

Here are some examples of valid identifier naming conventions:

  • firstname
  • totalPrice
  • cust_1
  • click_calculate
  • $
  • $total

Beginner JavaScript – Chapter 2 – JavaScript Statements

Posted August 9th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

JavaScript statements are the core building block for anything JavaScript. A JavaScript statement is merely an instruction, telling your JavaScript what to do. Here are some examples of basic JavaScript statements:

var name = "Dennis Deacon";
prompt('What is your name?');
var myDate = new Date();

JavaScript statements follow rules or syntax. Don’t follow the rules, and your JavaScript won’t work.

  • JavaScript is case-sensitive. This means javascript, JavaScript and Javascript are all different. This rules alone will likely cause 80% of your errors in the beginning of using JavaScript.
  • JavaScript statements end with a semicolon (;). While some of code may work without it, missing a semi-colon in the right situations will cause errors. Always best to use at the end of all statements.
  • JavaScript ignores whitespace in statements. Make your JavaScript readable, scannable while developing.

JavaScript allows for commenting in your code. Commenting is a best practice that you should always provide, not only for yourself, but for others that might have to maintain your code in the future.

A single line comment starts with two forward slashes before the commented code. Example:

// This code is commented

If you wish to comment multiple lines of code, you can use the multi-line comment; a forward slash followed by an asterisk, then the reverse (asterisk followed by a forward-slash) at the end of the commented code. Example:

/* This code is commented.
        Make Sure to change the variable below. */

Lastly, when and how to break JavaScript statements.

  • After an arithmetic or related operator (+, -, *, /, etc.)
  • After an opening brace ({), bracket ([), or parenthesis (()
  • After a closing brace (})
  • Do not break JavaScript statements after a closing bracket (]) or parenthesis ())
  • Do not break JavaScript statements after an identifier, a value or the return keyword (more on these later)

Up next: JavaScript identifiers.

Beginner JavaScript – Chapter 1 – Including JavaScript on Web Pages

Posted August 8th, 2011 in Javascript by deconspray

Note:

As stated in my initial post, this is part of a series of JavaScript-related posts. As I am becoming knowledgeable in JavaScript, I am posting out what I’ve learned, to re-enforce my knowledge, as well as maybe helpful other web designers/developers in learning JavaScript. If I have mis-stated anything, please feel free to post it in the comments. You’ll help me, and others in learning JavaScript. Thanks!

Before you write your Javascript, you have to know how best to incorporate it into your pages. Officially, there are three methods.

  • In-line
  • Embedded
  • External

Inline “was” one of the more popular methods of including JavaScript on a page. However, in keeping the web standards approach in mind (seperation of content, design & functionality), we’ll focus on the last two. Continue Reading »

Learning JavaScript

Posted August 4th, 2011 in Javascript by deconspray

Things come easy, things come difficult.

For the past 17+ years, I’ve created websites. HTML, XHTML, HTML5, CSS, CSS3, you name it, I’ve done it. I’ve even used Flash, JavaScript and jQuery to enhance my sites. Again, I’ve used JavaScript & jQuery, but I haven’t known it up to this point.

I’ve spent over a decade trying to grasp it; each time, it would elude me and/or I’d become distracted by something more digestible. With the JavaScript renaissance (the advent of JavaScript libraries, AJAX, and all the other developer toys), JavaScript and related libraries have become a requirement in the front-end developer’s tool belt. And overnight, I was behind the ball instead of alongside or in front. So this year, I’ve made it a priority to not only learn, but know JavaScript. I don’t want nor need to be an expert (as I’m heading down a UX track). But I have to know it, create it, manipulate it.

Continue Reading »

Twitter Discussion on Web Industry Job Titles: Designer

Posted July 19th, 2011 in Web Design by deconspray

There’s two things that befuddle me (well, there are more, but I digress…). Job titles in the web/internet industry and Twitter.

I love Twitter. I primarily use Twitter to follow my mentors and peers in the web/Internet industry. One thing though that frustrates me to no end is that lack of dialog, discussion. I’m also frustrated by the lack of engagement when I post items/questions of interest. I’ll eventually figure that out. But discussion on Twitter is lacking. Sharing online resources and Instagrams is hot, but not opinions and discussions (@mollydotcom, excluding you for now, but you’re my fav).

This was true until this morning. A fantastic thread started between Andy Budd (@andybudd) and Mark Bouton (@markbouton), then spread to a few other luminaries in the web design and user experience industries. For now, I’ll leave them nameless. Below, I’ve attempted to capture the thread in its entirety for posterity, awareness and a note on how a proper debate should be handled. Apologies in advance for any inaccuracies/order discrepancies. Maybe our politicians should consider Twitter during the upcoming campaign. Keep rebuttals down to 140 characters … HA!
Continue Reading »

Time for Restaurants to Get Their Websites Right

Posted May 20th, 2011 in User Experience, Web Design by deconspray

I previously wrote about an experience where a restaurant forced me to visit their website for their menu, only to discover that their website (including their menu) were in Flash.

Recently, I again had the need to lookup a restaurants menu online, via a mobile device. This time, the menu was in PDF format, making me traverse virtual hoops to see what the restaurant offered. Why do restaurants make it so hard to obtain information? Continue Reading »

It’s Never Simple – Coupons

Posted December 4th, 2010 in User Experience by deconspray

I recently searched the web for some deals on a new product I had tried out. Visiting the manufacturer’s website, I discovered a coupon offering decent savings. You had to provide your contact information, which for me was a decent exchange for the coupon’s value. I completed the form and submitted it.

Continue Reading »

Delving into a Website the Wrong Way

Posted November 15th, 2010 in Web Design by deconspray

— “Put the cart before the horse.”

Why do website owner’s do this? All the time? They come up with a great website element or feature. Then, they build the site around it. But they forget the primary reason for the site. The goal. Increase sales. Sell books. Increase downloads of brochures. They’ll all agree that these are the reasons they wanted a website in the first place.

Then why is the goofy menu, or the tacky videos the focus?

Continue Reading »

The Way We Build Websites

Posted March 16th, 2010 in Latest, Web Design by deconspray

Late last year, I wanted to verify thoughts I had on web design and the industry, specifically related to the web design process. I tapped my network at LinkedIn to poll. The results are definitely not scientific, as the questions were polled at different times, with different responders. Consider this just a quick check into the industry, not an all encompassing survey, like A List Apart’s Web Design Survey. Continue Reading »

Text-Decoration vs. Border-Bottom

Posted March 15th, 2010 in Latest, Web Design by deconspray

The topic of using text-decoration versus border-bottom for hyperlinks recently cross my mind. To be honest, I had never consider the effects and impacts of these two different implementations. However, since playing with these concepts, it has become quite an important usability item to me. Continue Reading »

Modular CSS – Flexible Web Design

Posted February 24th, 2010 in CSS, Latest, Web Design by deconspray

I really don’t know the official term to describe this method. It’s not new, by all means. However, it’s a powerful method of using CSS code & classes effectively and efficiently.

Multiple CSS Classes

First, you may not be aware that you can use multiple css classes on elements. Example:
<p class="classone classtwo"></p>
Here’s where the power comes in. We can use these multiple classes to separate the structure from the “skin.” Continue Reading »

Great New Web Design Podcast

Posted February 18th, 2010 in Latest, Web Design by deconspray

Just learned of a great new web design podcast.

The Pipeline, hosted by Dan Benjamin, features interviews with leading designers, developers, writers, and entrepreneurs. The first episode featured Jeffrey Zeldman, designer, founder of ALA. I found this to be the best interview with Jeffrey.

Other shows feature interviews with Ryan Carson and Jason Fried, with more interviews to come.

Visit the web site to listen to individual interviews, or subscribe via iTunes.

Let’s Eliminate Sexism in the Web Industry

Posted February 14th, 2010 in Latest, Web Design by deconspray

My typical post center around sharing my knowledge and experience with other web professionals. This particular post will depart from the norm and cover the very important topic of diversity & respect in the web industry, specifically related to gender.

I recently attended the 200th episode of the Boagworld podcast. The podcast celebrated by spanning twelve hours with special guests; experts in their specific web-related field. As usual with the Boagworld podcast, there was plenty of banter, including a few music numbers and bad jokes, along with the valuable, motivating information. If you don’t listen to the podcast, I highly recommend it. Continue Reading »

Too Much Emphasis De-emphasizes Content

Posted February 12th, 2010 in Latest, Web Design by deconspray

Early in my web career, say 2000, I was always told to limit what you emphasize. The theory is that the more you emphasize, the less something is emphasized. I remember debating with several content producers on this topic. Continue Reading »

User Experience and Mobile Flash

Posted January 25th, 2010 in Latest, Web Design by deconspray

I recently had a bad experience at a local restaurant. So what does that have to do with web design?

My wife & I were told to view the carryout menu online. As we were physically at the restaurant, we attempted to view the menu on the restaurant’s website from our smart phones. That failed, due to the site being created solely in Flash. Continue Reading »