Posts Tagged ‘usability’

Web Jobs and What People Really Do

These days I spend a lot of time looking at job postings around the Internet, it’s a tough place to be especially since most recruiters have no idea what web people do and those who are aware of the industry are often completely unaware of the ridiculous nature of their requests. The other day I saw a posting on Monster for:

a Senior Web Developer with 6+ years Adobe Flex experience and a working knowledge of Word, office printers and networks.

First … Flex was only invented in 2004. Second, it’s a specialty … Flex experts are like dessert chefs, asking them to be good at washing dishes in addition to making authentic French meringues will not get you qualified candidates, it will get you dish washers. Here’s a quick look at what I believe are accurate descriptions of jobs in my industry:

Web Designers

A web designer is a pixel pusher, they use Adobe Photoshop or similar tools to create Graphical User Interfaces to be converted to Hypertext Markup Language. Ideal web designers sway to one of two sub specialties, they are either functionally capable Usability Specialists or entry level Web Developers in addition to being a designer. Web Designers are artists, akin to Graphic Designers and photographers and rarely have a university degree, though most go to college.

Multimedia Specialists

There are sadly, dozens of areas of Specialists in the Web field from those who specialize in Flash or Flex to QuickTime, Shockwave, 3D artists and those who work in the video or audio production fields. Often these Specialists will have backgrounds in design as well as their media specialization. Few in the industry have degrees, and only a handful have college diplomas since the work is profitable from an early age.

Web Developers

A web developer programs websites using the Hypertext Markup Language to convert a designer’s artwork into a language compatible with web browser technology. They are also capable of programming the interactivity of a website using PHP or ASP based languages, JavaScript or other languages. Web Developers are coders, similar in nature to C++ or Java computer programmers. 

Usability Specialists

The web is a marketing platform, the job of a Usability Specialist is to ensure the average user can successfully navigate a website and achieve the business objective, regardless of what the object may be. Often the Usability Specialist is also the Project Manager and has an obsessive nature geared towards Quality Control and meeting objectives.

 

Web Publishers

 

A Web Publisher is a data entry person, they’re job is to convert information from print or electronic form into web based content following strict document structure guidelines. After the designer and developer have put together the skeleton of a website, the Web Publisher works with Copyrighters and the Marketing team to ensure all content is placed in the right places before launching a website.

SEO Specialists

Unique to the Web, an SEO Specialist is an Organic Marketing professional who’s sole purpose is to increase the traffic rate of a web property through non paid advertising means. Often the SEO Specialist will also manage online advertising programs, purchasing and real world marketing but his/her real goal is to broaden the success of a website without paid placement.  

Web Managers

The Web Manager is the business brains of a website. They’re job is to manage timelines, budgets, analyze Analytics and convert web traffic to measurable business. In many smaller organizations they’re also Web Generalists capable of lending a hand in all other areas of the puzzle, those who have mastered multiple ares of expertise are often called Web Masters. This is a tough job, it involves managing the egos of artists and the surly nature of programmers while meeting tough deadlines.

Network Administrators

I like to call NA’s the Backend Boys but for some reason they don’t like that title. A Network Administrator is a specialist which every Web person needs, they don’t get a lot of glory and they’re often (rightfully so) the first to get blamed with things go wrong but a Network Administrator’s job is to run the hardware (physical computers) the Web teams software (the website) operates on. They spend long hours ensuring email, servers, data streams and corporate software work.

Director of Technology

These days, our companies have become technology saturated. The role of a Director of Technology is to understand the business objectives of the organization and utilize cost savings methodologies to deliver the best computer solutions possible. Simply put, they’re job is to always do more with less while ensuring the best people are capable of delivering timely solutions and the rest of the organization sees technology as a friendly resource, not an aggravation.

Chief Technology Officer

The CTO title always interests me, there’re rarely a Vice President of Technology in an organization so I’m not sure if the title is a silent salute to Star Trek. The job of the CTO is two fold, first they have to keep the technology of a whole organization flowing smoothly and they also have to plan for future technologies by knowing where the company needs to be down the road. Their job in short is to lead the whole technology team for the management team and to solve the problems of the business through new, innovated methods.

What would you trade for a great website?

Wow, the economy is in the crapper and despite the reassurances of the President last week I’m not feeling much better. OK, that’s actually a lie. The bad economy doesn’t really affect me directly, I live in a government town of about 40,000 people where housing prices are still steady and new home starts? They’re down from last year but more due to the cold weather and labor shortages then anything else but I get that all over the US (and around the world) that’s not the case so instead of trying to sell you a website (even if you do need it) I want to know what you’ll trade me for a great website.

I’ll give you a free basic WordPress website just for signing up with BlueHost which is a great start but I bet there’s a lot of people out there who need more than a starter site and frankly I’m bored off my truck sitting home right now. Don’t feel too bad for me, I have fresh contracts starting up in the spring and I just left a great government contract so I’m not exactly in a bad place right now but what I’d really like to do is broaden my portfolio and add some new, exciting projects to my resume.

I have over 15 years experience in the web industry, which means that I literally started building for the first web browsers and have continued to build my experience and skills to match the current technology. I am a well rounded programmer with xHTML, XML SGML and HTML markup experience as well as a master of tableless design and CSS. I can script in PHP, ASP, JavaScript and ColdFusion as well as program in BASIC, .net and C++. My  design skills are top notch, I am a certified expert in the use of Photoshop and Dreamweaver, excellent in Illustrator and a master of web design and usability. Beyond looking pretty, I build websites that are W3C compliant, compatible with the full range of web browsers, optimized for search engines and organic marketing as well as tested to ensure they’re readable by the visually impaired and meet government standards. I can build Facebook applications, I am a master of WordPress and understand social media very well.

In short, I am just the type of web master that most people dream of having on their team but I live in a small town with few IT jobs. Over the years I have been the Web Master for Corel, built web properties for the International Montery Fund, the United Nations and the Smithsonian Museum. I need to find work and I’m not too proud to ask, so please if you can use an out-of-work hired gun and have anything that I can work on remotely or would like to fly me in for some contract work, I would love to hear from you.

Of course the obvious question is … what would I be willing to take right? I’m like every web guy out there, I’d love to get some quality advertising in print, radio, TV or online and I’d love to have some gift certificates for hotels or tourist attractions around the world. I’ll take your AirMiles if you’re willing to part with them and I’ll gladly take any old Wii/xBox or PS3 games you happen to have. If you happen to live in driving distance to Fredericton New Brunswick, I’ll gladly let you put in a kitchen for me or shingle my roof in the spring.

So, let’s talk turkey.

Adding Rollovers to your HTML without JavaScript

In my last tutorial I showed you how to build a simple horizontal menu in HTML with only a few lines of CSS. Let’s take that same HTML code and use it to increase usability and improve the overall look of your site.

The HTML

This is the same HTML used in our last article:

<div class=’menu’>
<ul>
<li><a href=’index.php’ title=’Home’>Home</a></li>
<li><a href=’about.php’ title=’About Me’>About Me</a></li>
<li><a href=’contact.php’ title=’Contact Me’>Contact Me</a></li>
</ul> 
</div> 

The CSS

In CSS there are a few different states an anchor tag (<a>) can be. You can be:

 

  • a:link – the default state
  • a:visited – after you’ve been to the page
  • a:active – after you’ve clicked it but before you’ve left the page
  • a:hover – when your mouse is over the link

 

To make a page truly optimized for usability we can change the state these menu items appear in.

.menu a:link {
text-decoration: none;
color: #FF0000;
border-bottom: dotted 1px #FF0000;

newmenu 300x72 Adding Rollovers to your HTML without JavaScript imageThis CSS changes the color of the links to Red (#FF0000) and removes the underline from the links. Personally, I don’t like the default underlines so I like to replace them with a dotted line instead.

Next we want to assign a special event when the user has placed their mouse over one of your text items. To do this, we affect the a:hover CSS. Also, while I’m in there I am going to add a special event to the a:active CSS which will change the color when the user clicks the link but before they leave the page. This ensures they know they’ve clicked the link.

.menu a:hover {
color: #0000FF;
border-bottom: dotted 1px #0000FF;

.menu a:active {
color: #00FF00;
border-bottom: dotted 1px #00FF00;

Using the two states above, the user is now aware that they’ve entered a clickable zone because the link changes color and when they click the option, it changes color again to let them know they’ve clicked. There you go, three simple CSS commands to make your page more usable.

Five Free SEO WordPress Themes in Five Days

After reading a great series by Nathan Rice on the setup of WordPress for search engine optimization I’ve decided to spend next week developing a series of freemium WordPress templates for businesses to use on their own business websites. A few weeks back, I wrote an article on how you could put up a website for just $100, these templates would be wonderful for companies interested in building an affordable website for little money.

Free, Freemium or Premium?

Part of why I like being in the WordPress community is the co-operative nature of the community and how we support each other by building better plug ins, better templates and helping to improve the core of the software. To that end, the idea of Premium WordPress themes offends me just a little but I also appreciate everybody needs to make money so I’m torn. There are advantages to Premium themes and money does motivate people to make better themes so I guess I’m at a loss for how to release these themes.

With that said, I plan to release the next five themes as my own version of Feemium. For those who are WordPress experts already, you’ll be able to download them and use them under a license but for those who need help, I’ll provide installation and configuration for a consulting fee. Specifically, the new themes will feature a few things:

  1. They will feature strong designs with various businesses in mind. My previous theme was attractive but these will be better.
  2. They will follow heuristic rules, both my own and those of industry experts.
  3. The designs will be usable, with a focus on usability for the end user.
  4. Each design will be optimized for the web and search engines using the practices I’ve previously discussed.

You may want to subscribe to my RSS feed to see the results or check back often.

The Themes:

  1. Smashingly Good Free Magazine Theme for WordPress
  2. Small Business Theme
  3. One Night in Paris SEO Theme

Minimalist Fixed Free WordPress Theme

Demo of Minimalist Fixed

The Minimalist Fixed theme for WordPress is a free theme designed to be clean, white and very easy to read. The theme favors usability over design, although I also believe that it’s well designed :)

The theme features a clean, broad design with a fixed width. The header is designed to be focus attention on the site title and description using a vivid red on white background while the content also used a wide formating for easy reading. The menu is located just below the site description is non-intrusive and easy to navigate.

I’ve placed the traditional side content at the bottom of the design using a three column split, personally I find this ensures it’s out of the way and visible only when you’ve finished reading the article or post above.

The theme has been tested in WordPress 2.6.x in Internet Explorer, FireFox and Safari as well as on the Nintendo Wii and Apple iPhone.

Download Minimalist Fixed. If you like this theme but would like to have it customized or installed for you, why not contact me? I’m available for WordPress consulting, theme customization and freelance development.

  • Download the Theme
  • Preview the Theme
  • Web Based Heuristics

    Jakob Nielsen has been called a Guru by the New York Times, WebReference.com calls him a Czar and yet most Internet users, let alone most Internet design teams have no idea who this titan of interface design is.

    As a web designer who started created sites way back before recorded time began (1996) I rarely gave much thought to the methods behind the madness until stumbling upon Dr. Neilsen’s Ten Usability Heuristics while preparing for an Interface Design class I was about to teach. What I discovered literally changed the way I approached graphic design, the internet and made me re-evaluate how I built even the simplest website from then on.

    In a nutshell, Neilsen’s Heuristics is a collection of experience driven knowledge or observations which when put together create a road map for creating intuitive interfaces. Seemingly trivial independently, the ten heuristics add up to become the most astounding checklist ever assembled. You’ll be astounded how many websites fail to meet this simple list and more alarmingly, how many web designers allow small to medium sized businesses to break these simple ten rules.

    What I did years ago was take Dr. Neilsen’s list and create my own Web Heuristics based off his Ten Usability Heuristics, as a guideline to creating great websites and today, this list acts as Getaway Graphics core principals of web design.

    Site Situation

    Regardless of how a web user reaches a particular page, users should have an immediate understanding of what page they are on, which section that page belongs to and what they should be expected to do next.

    Site Status

    When users interact with the website, reasonable feedback should be given to indicate their status. For example, when a form is completed, users should be immediately told the form is being processed and the results of the action.

    Real World Representation

    We all know the Internet isn’t the real world but websites should act in accordance to the real world. Words, phrases and concepts that are familiar to visitors should be carried throughout the website and be consistent with the users real world knowledge of those concepts.

    User Freedom

    Visitors must be capable of moving around a website freely and able to make mistakes, reverse those mistakes and even abandon mistakes without interference from the website.

    Consistency and Standards

    Words, colors, design elements and phrases used throughout a website need to mean the same thing regardless of where those elements are used. Headings must always look like headings, text like text and most importantly words or phrases used on the website must remain consistent throughout.

    Error Prevention

    There’s no room for errors on a website and no excuse for exposing your prospective customers to them. If your website has an error, it’s not the users responsibility to work around it, it’s your duty to fix it.

    Recognition Over Recall

    Vistor’s can not be asked to remember information, it’s up to us to minimize the strain on our visitors memory by providing easy to follow links and providing appropriate solutions from one screen to another. Instructions on how to recover information should be readily available.

    Flexible, Efficient Operation

    Providing users with shortcuts to commonly accessed elements, sitemaps, search engines and methods for both novice and expert users to interact with a website is key for returning visitors.

    Minimalist Design

    Effective Interface Design isn’t about bells and whistles. It’s about making it possible for users to achieve goals, every extra unit of information displayed to a user can interfere with that objective and diminishes your ability to ensure the site is used successfully

    Error Recovery

    If errors are going to occur (this is the internet after all), help your visitors recover with plain, everyday language and suggest a solution. This is a fairly simple process often overlooked by time crunched web developers but it’s really the most important of Dr. Neilsen’s rules.

    Help

    Help should be easy to find and offered in the most effective way possible. This should always include sitemaps, search engines and mouseover help when ever possible

    You can leave a response, or trackback from your own site.

    Making Images Print Friendly

    Aaron Gustafson has produced a wonderful article on replacing web images with images suitable for printing, the iIR: img Image Replacement method allows web designers to create pages which look great in both web and print.

    Using Aaron’s method, designers should be able to create and maintain websites viewable on multiple devices without having to deploy multiple versions of the site. This will allow users to access the same website via an iPhone, a Wii, a laptop or a printed version and have graphics on the page served to meet their specific needs.

    Directory Tips for Web Designers

    Building a great website is about a lot more than putting together a bunch of text or graphics on a page, it’s critical that a website be manageable and expandable if you want it to work properly in the future. With that in mind, here are some basic tips for new web designers that a lot of books seem to overlook but I feel are critical.

    Directory Structure

    First off, organize your files effectively. It may seem silly but there’s nothing worse than having to go back and find a file in a months time and it only take a few minutes to do it right the first time. Building a proper directory structure is simple, first lets start with the root folder (that’s the main directory of your website) and add a few new folders:

    • css – cascading style sheets directory
    • images – used for all the images on our site
    • includes – common files that are loaded by multiple pages
    • js – the javascripts for our site
    • media – a directory for rich media

    Now these new folders will store all of our future files and make the job of locating the related content much easier. Remember, we always want to lowercase our directory names to make it easier to remember.

    File Names

    A common mistake in naming files is to use MiXed CaSe or Capital Case. This works great for labelling filenames on your personal computer but many web servers are case sensitive meaning two files may have the same name as long as they have a different mix of upper and lower case characters. For example, Index.php and index.php are considered separate files on standard web servers.In addition to the quirks of web servers, we also want to avoid using mixed or upper case names for our users. That way a user only has to remember the path to your specific page and not the case structure of your web naming conventions. If you do have to separate a filename into recognizable sections, I prefer to use an underscore (_) or a dash (-) to do it such as contact_form.php or conact-form.php which allows users to easily see and dictate the spelling to others.

    File Extensions

    There are few things more frustrating than trying to remember the proper syntax of a filename when you’re coding or looking for a specific file. Adding to the confusion is file extensions which often vary from one web server to another. To simplify the process, I strongly recommend always using the .php (for Linux servers) or .asp (for Windows servers) for all your HTML and scripting files. The additional server time needed to load these pages will be minimal and it allows you the easy of standardizing the extensions for your development speed.

    Hiding Directories

    Sometimes we create web directories that we don’t want the outside world to see. For example, there is no purpose in allowing users access to the /root/images/ directory but we still want people to be able to view the images stored there, so we need an easy way to limit peoples access to that particular directory. Without getting into complex .htaccess files, one of the easiest means to accomplish this goal is the create a new index.php file and upload it to the directory, this will cause people to see a blank page upon reaching the page.If you want something slightly more interesting, you can bounce people back to the directory above the restricted path by including the code <?php header(“location:../”);?> in the index.php file. This little piece of code will force the browser to refresh immediately to the directory above or in our example, if placed in the /root/index/ directory it will force the user back to the /root/ directory.