Sean Landry Interaction Designer

CSS zealot and user experience maniac

Archive for the ‘Information Architecture’ Category

Fake usernames

If you’re like me, you spend a good deal of time mocking screens. If you are working in an application with users then you often need to create fake user names for your screens. Since I can’t stand using John Doe and quickly run out of names I decided to create a list I can pull from as needed. I took the most popular first names from the US Census and the most popular last names and randomized the two columns to create a list that looks real. Also available as a txt file

Here is the list:

Jackson Turner
Megan Perry
Ryan Harris
Mason Edwards
Noah Jenkins
Stephanie Hayes
Caleb Scott
Morgan Wood
James Parker
Austin Jackson
Jose King
Stephanie Foster
Mia Bennett
Ella Flores
Jordan Rogers
Victoria Sanders
Alexis Brown
Matthew Jones
Ashley Thomas
Jacob Smith
Gabriel Wright
William Taylor
Victoria Griffin
Elijah Adams
Mason Brooks
Samantha Murphy
Rachel Jenkins
Madison Sanchez
Brooke Alexander
Grace Cox
Sarah Cooper
Savannah Hughes
Robert Green
Madison Ramirez
Kaitlyn Powell
Logan Young
Zachary Lewis
Elijah Young
Tyler Martin
Sydney Wood
Andrew Wilson
Abigail Johnson
Anthony Anderson
Thomas Baker
Alexander White
Isaiah Roberts
Angel Perez
Andrew Davis
Samuel Walker
Emma Morris
Rachel Powell
Jonathan Martinez
Savannah Butler
Cameron Robinson
Hannah Rogers
Angel Moore
Samantha Hughes
Jackson Phillips
Chloe Clark
Joshua Williams
Jacob Campbell
Abigail Cook
Christopher Brown
Isaac Evans
Dylan Rodriguez
Hannah Nelson
Ethan Wilson
Logan Torres
Destiny Hall
Kayla Ramirez
Megan Sanders
Thomas Alexander
Olivia Perry
Morgan Ross
Isaiah Roberts
Brandon Martin
Hailey Baker
Noah Lee
Ryan Patterson
Evan Scott
Lauren Howard
Jordan Gonzalez
Luke Campbell
Ava White
Ethan Hill
David Walker
Kevin Cox
Alexander Williams
Gabriel Green
Jasmine Barnes
Taylor Bryant
Michael Bennett
Brianna Torres
Hunter Carter
Daniel Lee
Evan Phillips
Jason Parker
Justin Hernandez
Haley Gonzalez
Austin Lopez
Christian Clark
Alexis Rivera
Zachary Hayes
Joseph Moore
Allison Simmons
Jose Reed
Lily Ward
Isabella Perez
Kaylee Richardson
Jennifer Patterson
Mia Price
Jennifer Collins
Samuel Flores
Kaitlyn Bailey
Cameron Nelson
Maria Watson
Jessica James
Nathan Allen
Christopher Lewis
Kaylee Griffin
Katherine Long
Aaron Collins
Taylor Ward
Anthony Anderson
James Thompson
Ashley Bell
Makayla Russell
David Jackson
Alyssa Miller
Hunter Carter
Nicholas Henderson
Nicholas Thomas
Nicole Gonzales
Ella King
Justin Murphy
Kevin Hill
Grace Adams
Brianna Thompson
Michael Johnson
Isaac Mitchell
Jonathan Morris
Chloe Brooks
Joseph Cook
Tyler Russell
Aaron Smith
Brooke Garcia
Sarah Washington
Benjamin Hall
Julia Bell
Elizabeth Bailey
Emma Lopez
Emily Wright
Isabella Morgan
Hailey Price
Nathan Ross
Anna Taylor
Ava Gray
Lauren Peterson
Christian Rodriguez
Sophia Simmons
Jack Turner
Luke Peterson
Emily Stewart
Kayla Cooper
Jasmine Evans
Alexandra Washington
Julia Henderson
John Garcia
Caleb Martinez
Mackenzie Bryant
Sophia Howard
Alyssa Richardson
Allison Davis
Olivia Reed
Destiny Coleman
Anna Kelly
Lily Diaz
Natalie Barnes
William Diaz
Maria Foster
Matthew Kelly
Benjamin Harris
Jack Mitchell
Dylan Allen
Mackenzie Gray
Makayla James
Katherine Rivera
Nicole Coleman
John Sanchez
Brandon Robinson
Elizabeth Hernandez
Robert Long
Haley Butler
Natalie Watson
Jessica Stewart
Alexandra Jones
Jason Edwards
Daniel Miller
Joshua Morgan
Sydney Gonzales

  • Comments Off
  • Filed under: Information Architecture, Software Design
  • Last night I received a real brain twister of a question from @ganarce on my Twitter page. He wanted to know if there was a way to align data within a table using a decimal point “.”. Seemed like a fairly routine type of formatting (invoices, data etc.). Without massaging the data ahead of time to all have the same number of characters before or after the decimal point.

    Aligning data with a decimal point

    I went to the W3C to for an explanation on horizontal alignment. Ah ha! there it was. Easy enough:

    col align=”char” char=”.”

    Unfortunately there is little or no support for this attribute amongst the Browser community. I found a method using JQuery that seems to work with IE, FF and Chrome.

    Happy formatting!

  • Comments Off
  • Filed under: CSS, Information Architecture, JQuery, web development
  • A little about visual hierarchy

    Use visual hierarchy as a method to guide the user. It should show relationships and priorities between elements on the page. If communicated well, it should be clear to the user what the preferred course of action should be. Without visual hierarchy the user is left trying to decide what information is more important. Not all hierarchy is based on size. Here are some other methods to indicate to the user what is most important.

    Focus:. The layout indicates where users need to look first.

    Flow: The eye flows smoothly and naturally by a clear path through the surface, finding user interface (UI) elements in the order appropriate for their use.

    Grouping:. Logically related UI elements have a clear visual relationship. Related items are grouped together; unrelated items are separate.

    Emphasis:. UI elements are emphasized based on their relative importance.

    Alignment: The UI elements have coordinated placement, so they are easy to scan and appear orderly.

    Review of Balsamiq wireframing tool

    The folks at Balsamiq provided me with a no strings attached license for an honest review of their software.

    Balsamiq is a tool for creating wireframes. It’s an Adobe Air application that loads fast (providing you already have Air installed). I installed it on a Friday morning and decided to see how quickly I could learn to use it. Since I wanted to test it’s complexity and flex it’s capacity, I chose a complex interface randomly from the web. The Expedia.com last minute deals page had a lot going on (probably more than it should) and would be a good test. Below is a screen capture of the original:

    Expedia screen shot

    Getting started was fairly easy. Not a ton of menus and I’m familiar with most design applications. I got started drawing the big objects, browser window, columns etc. Which turns out to be helpful since the application supports layering. I didn’t need much “bring to front” type of editing. After about 35 minutes I completed the wireframe.

    Expedia wireframe

    Some tools I’ve used previously to wireframe/paper prototype include: Quark, Illustrator, Photoshop, Fireworks, HTML and pencil on paper. Balsamiq felt much faster since many of the interface elements were already created (dropdowns, chekboxes, tables etc.) Only the things you’d find in an interface. Very simple.

    Pros:

    The interface is simple and easy to use. It uses many of the design application standards so it’s quick to get started. The sketched look of the wireframe ensures no one will mistake it for a “mock” or visual design. The focus of wireframes is to indicate structure not style. This tool does that extremely well. You can easily export your designs as PNG files for easy sharing or printing.

    Cons:(Some of these may be “newbie” type problems since I’ve only had the application for a few days.)

    Some of the constructs allow for font/text resizing while others do not. I would like to determine font size for all elements. Also it wasn’t clear to me how or if I could add my own elements to the application or if there was a community of users contributing to the app. Grouping shortcut made sense [Ctrl + G] where ungroup [Ctrl + Shift + G]. I’d prefer [Ctrl + U] (Quark Standard).

    Overall, I was quite pleased with Balsamiq and would recommend (and have) this tool for any designer who wireframes as part of their day to day activities.

    Information Architecture gone wrong

    I came across this site today. I count 84 links before the first paragraph ends. Ever wonder why you should hire an IA? Here’s the reason:

    Really bad IA

    That was sooooo last week

    Being informed of new technologies and innovation on the web not only makes you a complete geek but also helps you think of problems in different ways. Seeing how new ideas explode onto the scene and watching their influence forces you to approach problem solving from “outside the box” (one of the most overused terms to which few know the origin). Here’s a list of sites I use to keep current with new technologies:

    Digg
    Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as voted by users.

    Del.icio.us
    A social bookmarking tool that lets you see what are the most popular things being bookmarked. Also if you use the networking feature you can tap into your friends and family to share new cool sites.

    Bloglines – Really any news reader will do but it’s a great way to ingest loads of content with very little commitment to reading absolutely everything. I equate it to reading the headlines of the paper and only taking a deeper look at those articles which interest you.

    Below are a list of blogs which are in my account which I find particularly timely with new ideas:

    Boston Business Journal (I live in the Boston area)
    Techcrunch
    The official Google blog

  • Comments Off
  • Filed under: Information Architecture, Software Design, web 2.0
  • Blog SEO part 2

    Okay so it’s been a few days since I started tracking my rank. I made a few changes:

    1. I built a site map

    I downloaded a plug-in for WordPress. An XML file that creates an index of all my blog posts. It’s intended to make it easier for search engines to crawl your content.

    2. I changed my blog naming convention

    For my blog postings from something like “id=p23″ to “blog-seo-part-2″ – Simple change in the WordPress options (I can’t figure out why this isn’t the default)

    3. My last post about “Sean Landry”

    Since those key words are now relevant and were present several times I gained points in the relevance category. It’s important to note you’re posts can be considered SPAM if you load them with keywords.

    As of January 20th I’ve moved up one spot! I’m #2 now ahead of the basketball Sean Landry

    I’ll keep digging up new methods and post them as I move up or down.

  • Comments Off
  • Filed under: Information Architecture, SEO
  • SEO and trying to climb Mt. Google

    Okay I admit it. I “googled” myself (Sean Landry) the other day. I know I’m not alone here. However, I found something unexpected, my page rank. I was way down at #3! There are two other Sean Landry’s out there in the world ranked ahead of me.

    #1 – Sean Landry’s Page on 1UP.com

    This is a free Blog site for anyone who registered. Not exactly the most popular one out there but I started to investigate. The other Sean Landry had only one Blog post and way back in 2005? So not exactly showing relevance or activity of any sort.

    #2 – University of Manitoba: Bison Men’s Basketball Sean Landry

    Sean Landry Landry was a member of Mount Royal Cougars 2006 ACAC Championship team. In his first season with the Cougars, Landry registered a 4.1 points per game average and 3.3 rebounds per game in 17 games. He shot a 41.3% field goal percentage during the championship season.

    So other than playing good basketball for the University of Manitoba in 2006 why is he #2?

    #3 – Sean Landry

    That’s me! Number three? I have Sean Landry in the URL, in the title and all over the site and I post frequently.

    I’m on a quest to climb to #1. I’m digging up as many SEO tips and tricks I can find. As I find them I’ll post them here and hopefully I’ll show progress! If you’ve got any good techniques I’d like to hear them.

  • Comments Off
  • Filed under: Information Architecture, SEO, web development
  • There’s so much information out there on the web sometimes it’s difficult to find just the right level of intake versus filtering. I’m a bit of a visualization junkie. I’m a trained graphic designer turned web designer turned UX designer. I found by combining several technologies it helps me reach the right information.

    1. First I search for visualization on del.icio.us

    delicious_vis.gif

    2. Second, I grab the RSS feed from the executed search:

    RSS from Delicious

    3. Third I add the feed to my Bloglines account

    4. Fourth I scan the results…

    There are usually about 100-200 new results per day. I scan the list looking for a high number of users who have tagged sites with the term “visualization”.
    Bloglines Display

    Here’s an example I found the other day which is great graphic design and information display. It informs in an entertaining way. There are loads of these gems out there. I’s just a matter of being able to find them.

    Vampire Energy
    Vampire Energy


  • Comments Off
  • Filed under: Information Architecture, graphic design, web 2.0
  • If you’ve been living anywhere but under a rock you’ve been surrounded by the press and the candidates giving you their best pitch for why they want to be president. I’ve decided to evaluate their main campaign web sites and decide who gets the best score for: information architecture, usability and graphic design. All categories are rated 1-10.

    All reviews were done the day after the Iowa Caucus

    Candidate IA U G D Notes Total
    Democrats
    Barak Obama 8 5 9 Exellent design and layout. although the Javascript menus didn’t work well in Firefox (Barak you won the youth vote, don’t forget about FF and Safari.) 22
    John Edwards 5 6 6 Odd looking back and white splash page. I’m still trying to figure out the tone here but it sure doen’t “feel” presidential. 17
    Hillary Clinton 9 7 8 Very well organized site excellent IA . I’m giving her a 7 since she has a serious “scroll block” issue on the home page. 24
    Republicans
    Mike Huckabee 4 6 5 I know Mike doesn’t have as much dough as the other candidates which is reflected on his site. The red, white, blue, green, brown color scheme is rough. 15
    Mitt Romney 7 6 6 Overall the site is too dark. Too much use of grey. Same FireFox issue with the navigation. Scroll block on the homepage as well as an odd video splash page the first time I visited (kudos for not showing it again on return) 19
    John McCain 7 8 6 Again, a bitt too dark for an optimistic message. The IA is decent. 21

    Hillary wins the website review with 24 points.

    Interesting observations: First all these sites placed the “contribute” link in the upper right corner. Very good location for findability but also where the mental model of the shopping cart ($$) is, coincidental? Second, each site has way too much information. If they are trying to attract the media for an audience then this is great. But if you’re trying to sway an undecided voter they should be more concise with the information. Last, a few of the sites were guilty of “scroll block” this is usually caused by a horizontal line (or image or text) to span the entire page leading the user to think they have reached the bottom.

  • Comments Off
  • Filed under: Information Architecture, graphic design