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

One Secret to Email Marketing

Posted August 27th, 2011 in Email Marketing by deconspray

A brief diversion from my “Learning JavaScript” series, to discuss a major secret in email marketing. I call it “Single Theme to Right Audience.”

The idea is this; when you send out your blast emails, make sure you’re sending the value that your recipients opted-in for. Now, for some businesses, that’s simple. Say you sell electronic widgets (sorry, couldn’t help myself) and people opted-in for deals on electronic widgets. As long as you give them electronic widgets, whether their blue, green, etc., they’ll likely be happy. Continue Reading »

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 »

Just Go (to a Web Event)

Posted August 1st, 2011 in General, Professional by deconspray
WordCamp Chicago

WordCamp Chicago

I just returned from attending a web-related event, WordCamp Chicago. It reminded me how valuable these type of events are. Not only for the formal presentations, but also for the networking and connecting with like-minded people with similar interests.

There are a few excuses I frequently hear for not being able to attend a web event; money and time.

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 »

Sunstone Tours & Cruises

Posted February 7th, 2011 in B-to-C, Featured, Portfolio by deconspray

Sunstone Tours & CruisesThis was a redesign project for a long-time client, a niche travel agency located in Malibu, California. The lead-generation website features small-ship adventure cruise vacations, targeting retirees and affluent professionals. 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 latest…

Posted September 25th, 2010 in Latest, Professional by deconspray

It’s been a while since I last posted to the blog here. A lot of things have happened in my live, both professionally and personally. I’ll cover the professional here.

In June, I started a contract gig at United Airlines as a HTML Developer. Hands-on, indeed. It has been an adventure and a great experience. Although I don’t yet write my own JavaScript, I’ve been engaged in working with JavaScript, calling on the expertise of others. I’ve actually written and worked with JSP more than JavaScript. This, from a front-end guy.

It has, although, placed my on an emotional roller coaster. A good chunk of it relates to my lack of control; being able to handle certain tasks on my own. And there’s the “things” that just drive you nuts (nope, won’t go into it).

When this gig is over, I will be a better web professional. Stay tuned. I promise to be more prolific with my writing soon.

Malibu Garden Club

Posted June 5th, 2010 in B-to-C, Featured, Portfolio, Web Standards-Based by deconspray

This project was not so much a redesign as a refresh of the site’s current design. The original design was flat & dated. The initial view of the site was a Flash-based animation, followed by a redirect to the About page which contained information on the organization, PDF newsletters and the club’s board members, not hardly the primary interest when the club’s goal was to promote activities, events and membership.   Continue Reading »

User Experience Deliverables – CampodonicoDesign.com

Posted May 23rd, 2010 in Portfolio, User Experience Deliverables by deconspray

Status: Ongoing (2011)

Information Architecture

This is a personal website for an architecture/designer in the San Francisco Bay area. The goal is to create a site which promotes his style of architecture and furniture design to affluent clients and potential employers. While the discovery and planning of the site has been lead by Dennis Deacon, the actual design based from the planning deliverables will be created by the client.
CampadonicoDesign Information Architecture

Wireframes

Homepage Wireframe

Homepage Wireframe


Architecture Listing Wireframe


Architecture Listing Wireframe (Expanded)

Architecture Listing Wireframe (Expanded)


Furniture Listing Wireframe

Furniture Listing Wireframe


Project Wireframe

Project Wireframe


Blog Listing Wireframe

Blog Listing Wireframe


About Page Wireframe

Blog Listing Wireframe


Contact Page Wireframe

Contact Page Wireframe


Client Log-in Page Wireframe

Client Log-in Page Wireframe

Easy Keyword Research with New Google Search Results

Posted May 7th, 2010 in Search Engine Optimization (SEO) by deconspray

Google New Search Engine ResultsGoogle recent released a change to its search engine results page. While the change is subtle, one of the new features is a handy, easy to access tool for performing keyword research for optimizing your web site for the search engines. Continue Reading »