Archive | June, 2010

Site Search Analytics with Louis Rosenfeld

23 Jun

Site Search Analytics – what users want from your site, in their own words.

A little goes a long way. The Zipf distribution, shows that investment in results for most frequent search terms can go a long way. Focus on small number of most popular search terms, work on those, then pick another small chunk.

Users stop (and maybe search) when they lose the scent of information.

Search Terms or Queries

Interesting parallel between meta data and what people search for on your site. Meta data distills content found on a page, and search queries distill what user is looking for on the page.

Cluster your queries and determine which terms seem to mean the same thing? This will enable you to learn more about users’ language and tone. This also gives you a sense what might go into taxonomies, meta data and page content. Can give insight on what types of what facets you might consider for your search.

Determine content type

What kind of content is a user searching for when they use various search terms. Applications, news, reference content, contact info, instructions. This allows you to create a ranked list by content type which allows you to better understand contextual navigation. Content type can also be use to improve search performance, using content type as a search facet. Understand seasonality to determine editorial schedules.

What is unique about your queries? Product codes, course codes, proper nouns. If you see product names or unique queries you can identify, try to give search results more context, make your query string suggest sorting. When queries begin to spike, compare to current content and determine if there might be a need for more content on this topic.

You might use cookies for audience segmentation, so you can break down search and needs by different audiences. Are queries for content that doesn’t exist on your site? Try to determine what’s commonly important to all audiences.

Use numbers for proof you need to de-jargonify

Are people searching for jargon, where do search terms cross your company jargon? Focus on naming content what it is.

Key is to constantly tune your site’s performance. If you’re always looking at what users want from you, you have more of a chance of satisfying them than you do spending x number of dollars on a redesign every x number of years.

Goal-Driven Analysis

Remember to analyze failed search terms. Look at successes and failures in processes.

What are top pages where user searches from? What are the search terms for each page? Is page titled in an unclear or ambiguous way? Are you missing content from the page?

Test performance of most frequent queries. Measure using original two sets of metrics.

  • Relevance (or queries with the best result).
  • Precision (assess each result on a scale or relevant, near, misplaced, or irrelevant).

“Relevance will only work if you have an idea of the best results”

Getting Started with Site Search Analytics

If you use Google Analytics, you must enable search query collection in the settings.

Check out:

Javascript Libraries for Designers with Ryan Jeffords and Doug Boude

20 Jun

JavaScript Libraries

Like a Swiss-army knife. Allow you to write JavaScript quicker, easier and better. They do not replace JavaScript, they extend it. Extremely light-weight and cross-platform compliant. Most are open source.

Help to design an experience. Used to prototype and indicate JS functionality. They are used for page searching and modification, CSS and DOM organization, handle events, animations, transitions and AJAX (get and submit data without page reload).

Core Libraries and UI Libraries, many are considered hybrids.

Object Oriented Programming for Designers with Rob Huddleston

20 Jun

Procedural Programming – JavaScript, PHP, ColdFusion, ActionScipt 1 and 2. Tend to be simpler and require less code than Object-Oriented counterparts, but runs into it’s own challenges.

Object-Oriented Programming – C#, Java, ActionScript 3. Individual components allow greater flexibility. In a well-written object-oriented program, all components function independently.

Object-Oriented Terminology

Package – Filing cabinet or a folder, where files live.

Class – The most important. In order to have and use an object, you must define it. A class defines your objects. You can think of a class as a blueprint. You can’t actually use a class, it’s just the definition of the object. The class is stored in the package.

Object – Defined in the class. What you use in your program. In many cases the term object and instance are interchangeable. This is the house or where you do things.

Property – The nouns of the object. The items in the house. Defining the parameters of the object. Variable = property.

Methods - The verbs of the object. To-do list, things you do in the object. Function = method.

Dot Notation – If you have a class inside of a package, this is how you reference it. If you’re calling a property of an object, you reference using dot notation. Examples: flash.display.MovieClip, txtFirstName.text, etc.

Turn WordPress into a Professional-Grade Editorial Workflow Publication with Pariah Burke

20 Jun

WordPress is the worlds most popular blogging software.

Content Structure

Must plan ahead for content structure. Many think WordPress isn’t capable of doing things such as departments, features, columns and sections. WordPress templates let you to filter by category name or category number. Start with a clean and logical system to simply this process. Ability to set up RSS feed for each category. Sections are set up with slightly different color schemes. Ability to display related articles on an article page left nav.

Category for front page, items classified here show up on home page. Create an e-newsletter by creating a category for stories you wish to appear in your newsletter. Keep category slugs short, but descriptive.

To change automatically generated category ID numbers, you must go into MySQL and update two tables.

Editorial Workflow

Normal editorial workflow includes Story Creation, Copy Editing, Line Editing, Publishing. You must extend WordPress plug-ins and techniques to enable each of the workflow steps to work in WordPress.

Plug-ins to enable real-world editorial workflow

  • Custom Field Template
  • Get Custom Field Values
  • Co-Authors Plus
  • Capability Manager
  • Peters Collaboration E-mails
  • In-Series (if story is part of series)
  • Custom Field Images
  • Simple Pull Quote
  • Peters Post Notes (internal notes which never get published)
  • Scissors
  • NKMImageField
  • Remind Me (for cross references within your site, if you change permalink structure, links continue to work)
  • Public Post Review (send proofing link before posting it on the site)
  • Suma (to allow paid subscriptions, this one isn’t free, but worth the price)

One of the big limitation is the WordPress loop, or the text in the body of the post.

WordPress Limitations and Solutions

Slides at http://bit.ly/D2WCPSB

Adobe Flash Catalyst and Flex for Designers with Rob Huddleston

20 Jun

Books by Rob Huddleston

Adobe Flash Catalyst

Catalyst is middleware. Start in Illustrator or Photoshop, then pull in project using Catalyst. Convert to Flex project, then go to Flash. Catalyst does have very basic drawing tools and could be used for wireframe or a very basic prototype. Biggest challenge will be training designers to create things in Illustrator or Photoshop that will work well in Catalyst. Fireworks has the ability export as .fxg file which can be imported into Catalyst. It’s important to remember, Catalyst is a 1.0 application. It’s stable, but there are obvious capabilities that are missing.

Complete round tripping with Illustrator and Catalyst. A plug-in is needed for Photoshop and Catalyst and it’s not as seamless. Catalyst is creating code, Flex projects are written in ActionScript and MXML.

Best Practices for Designers

  • The web is not print, as different from print as video is from print.
  • Design for interactivity.
  • Don’t overuse interactivity. Realize when you’re enhancing and when you’re making something obnoxious.
  • Stay organized. Become obsessed with meaningful layer names. Rename layers, group them logically.
  • Plan your layer structure.
  • Use a naming convention. Figure out logical naming convention and stick to it.
  • Do not link to external files.
  • Design assets to be duplicated. Come up with a way in your naming convention to notate these.
  • Create outlines for text with filters and effects and text with uncommon fonts.
  • Do the right things in the right order in Catalyst.
  • Use components in Catalyst, everything in Catalyst becomes a component.
  • You don’t have to be a Flex developer, but understand Flex.

Other thoughts on Flash Catalyst best practices

Adobe Flash Catalyst CS5 best practices

Developers are from Mars, Designers are from Venus with Chad Udell

19 Jun

What is the difference between us?

Let’s start with some generalizations.

  • Developers are killjoys, squashing creativity to make a deadline or taking the easy way out to implement features within an application.
  • Designers are fun, but reckless, they create great work but aren’t concerned with the bottom line.

A little reality please.

We all want to create really cool stuff that delights our users. We must work together, have a rudimentary understanding of each others disciplines.

Change is needed. Designers need to be more practical and be able to move on when goal is achieved. You must remember the scope of the project. Developers use a mantra of release early, release often. This might be something designers could learn from. Web applications are evolving and things can change post-launch, or in phases. Developers must realize that design does matter. Nothing will ever be completely resolved, Wabi-sabi. If code can be agile, why can’t design be?

Integration Points

Process

Do you have a process? Having a defined process will get you much farther ahead of the game than someone who hasn’t gotten started. “Four D’s,” Define, design, develop and deliver. These four points must communicate throughout every step in the process. It’s the job of each group on the team to define what they need to get their work done effectively.

Workflow

Do developers produce wireframes, do designers? Which is appropriate? If designers are in communication with client and understand their needs, it’s more appropriate to have them do wireframes. If developers keenly understand client expectations and have regular communication with client, they should design or create wireframes. There are times when it’s appropriate for developers to lead a project and others when a designer is appropriate.

Integration Points

File organization and directory structure. We shouldn’t be arguing over how things are named. Directory structure is not a battlefield, but try to make naming make sense and shouldn’t include names, version numbers, dates, etc. Deep Thoughts On File Naming Conventions.

Versioning

You will need to sell the benefits of this to your designers. Maybe it’s not the best idea. Versions is user-friendly SVN for Macintosh. Service called Assembla does hosted versioning, ticketing, hosted workspaces.

Taxonomy

Standardize the way you talk about things. Do we call them wireframes, block diagrams, something else? Do designers know what vectors, arrays, objects, etc. are? Are you using a lot of jargon? Art history language?

The Perfect Prototype with John Farrar

19 Jun

Workflow is all about solving problems.

“Nobody knows what they want, until they see it.”

jQuery UI Themes recommended.

Site Design

When you think of any web site, you think of something visual. If you’re going to have a perfect prototype, why not work with a technology where you can use templates, libraries and patterns and apply a skin to change the look. Clients will often push back. You can push back too, just do it in a friendly way, you’re managing the push back.

Skinning is more than personality. If you can take your prototype and you can apply your company skin, people are going to feel better. When you’re doing your skin design, it’s all about the persona of the company you’re designing for.

Page Design

Usability is not optional. We know what a page does because we created it, when someone else sits down to use our application, do they know what it does, why it exists?

Page Intelligence

These principles can be extended to ASP and other server side scripting engines. They are in the process of building a reference library for this.

Prototyping: A Component for Successful Projects with Chris Griffith

19 Jun

Prototyping is incomplete version of software being developed with a subset of features of the end product.

Why Prototype?

  • Proof of concept. Will an idea even work?
  • Design validation. Design is organic, so prototyping gives you an idea how something feels.
  • Management buy-in. Helps to create a shared vision.
  • Reduce misinterpretations. For stakeholders, developers, team members.
  • Save time and money. Find and fix process problems early. Overcome design imperfections – often, real world data will change design.
  • Power of show and tell.

Guidelines for Prototyping

  • Short timeframes. A day, a week. Get something out there, iterate often.
  • Build only what you need.
  • Don’t be afraid to throw it out.

Types of Prototyping

Low Fidelity – Quick to develop, allows for exploration of ideas, can be more difficult to conduct user studies, zero coding. Includes activities such as paper prototyping using pen and paper, OmniGraffle. Carolyn Snyder wrote the book on Paper Prototyping.

Medium Fidelity – More real user experience, longer design and development time, still limited functionality. Use tools such as Axure, simple HTML, Balsamiq, PowerPoint, Napkee.

High Fidelity – Closer to reality. Greater design requirements. More development time. Can serve as reference platform for other groups (Engineering, QA, Marketing). Use tools such as Ajax with HTML, Flash Catalyst, Flash Builder, Axure, Balsamiq.

User Testing

Put real people in front of your product or service.

Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems - Book

Pitfalls of Prototyping

Be aware of the fidelity trap.

“Looks Done to me! Ship it!”

Prototyping: A Practitioner’s Guide – Book

Designer to Developer Workflow Conference in Kansas City

19 Jun

D2W Sessions

D2W Keynote with Doug Winnie

Flash Platform, From Start to Finish – Book

“Workflow is about building a relationship.”

Building a relationship with those on your team, project stakeholders, and the project itself.

Design and development embody many different disciplines.

Design Disciplines

  • Visual Design
  • Layout Design
  • Interaction Design
  • Motion and Audio

Developer Disciplines

  • Architecture
  • Scripting and Coding
  • Data
  • Content and Structure

Each person offers a unique combination of these disciplines at varying levels. Design and  development must respect each other. Each of us have our own experience in both areas.

Adobe Creative Suite 5

Adobe CS Review allows stakeholder comments and feedback throughout the design process.

Adobe Flash Catalyst

Adobe Flash Catalyst has really nice features for building interactive prototypes and allows export to browser-based or Adobe AIR application. Click asset in Flash Catalyst and file opens in appropriate application. After edited and saved, content is updated in Flash Catalyst.

Adobe Flash Professional

Now can create mobile applications for mobile, including Android and other platforms.

Workflow Lab – Beta 2

Not a project management tool. Doesn’t have aspect of duration. Has ability to show time, but is a visual reference only. Create project workflows and define how team will work together. Link to web sites, local files or can export assets into a single folder and archive assets and workflow and how they came together. Once the project has started you can categorize different items within the project.

Dreamweaver

New features in Dreamweaver 5. HTML5, Media Queries, CSS Inspector, Improved Live View with Navigation and CMS Integration.

First Impressions – Home page content & design

16 Jun

What is the first impression of a customer who visits your web site? Today, I visited the Prudential home page where I was greeted with the content and imagery below.

First impressions of Prudential

  • This guy has a lot of money.
  • He probably doesn’t understand day-to-day life of an average American.
  • Does it really take this much space to say that Prudential is stable?
  • How does a picture of the CEO help to back up this idea?
  • Why is so little of the home page devoted to the activities one might come to the site to complete?

Prudential Home page on 06/16/10

What are your first impressions of Prudential?

Next, I visited the Principal Financial Group home page. While some would argue the Principal home page isn’t as visually appealing, just look at the number of things you can do from the home page.

First impressions of Principal Financial Group

  • I can do a lot of things from the home page.
  • The site is very information-rich.
  • There are multiple links to primary activities a user might come to the site to complete.
  • A few photos on the site, but I can figure out where to learn more about rolling over funds from an existing 401k plan.

Principal Home page on 06/17/10

What are your first impressions of Principal Financial Group?

← Older Entries