no more silly connectors

This is a site map I am working on. Notice anything? No silly time consuming lines to show hierarchy. I'm just using color from now on. So there.

tactile visuals

I've been collecting little scraps from the web this past week. I love this style of calling attention to specific content or CTA's by using more tactile visuals. Little bits of the page that break the grid do a nice job garnering attention.

I'm a crafter and sewer and I am thinking a lot about how I can bring some of my skills in these areas to my work.

I'm also loving these from a wonderful collection at Naldz Graphics.

Pagination #2

Judging by the number of people reading the first Pagination entry, it seems to be a topic of interest for people, which is wonderful. So here are a couple more.

Today's competition is between Amazon and Anthropologie


Let's see what the largest online retailer's contribution to the conversation is:

At the top of the page it gives you a count of total results and how many are showing on current page. This is good. But there is no pagination here so you can't begin to move through the results.The "pagi" as I will fondly refer to it from this point on, is all the way at the bottom.
We need to see the total number of results and the total number of pages. I don't want to just keep clicking next for who know's how long.

You can't jump to the last page, which would be a problem if you were browsing a alph sort list.

As you move along continually hitting next, scrolling to the bottom of the list and hitting next again, the pagi displays like this.
Once you hit the 5th page it shifts a bit alowing you to get back to the first page. Ok, that's good
but once you get in a few more pages you realize that the only way to get back to say page 9 is to hit Previous, scroll to the bottom (repeat 4 times) or Go back to the first page and do pretty much the same thing. Leaving you to wonder which is the fastest, a calculation I'm not sure anyone wants to do.
Positives are the clean lines and easy to select Next and Previous


Now for the store that makes you want dress in lacey pjs, sip cappacinos out of mugs the size of a baby head and slip beneth pathwork quilts until spring arrives.


Here's what I like.

You get to select how many items to show on the page. I always want as many as I can get to reduce using the pagi. It would be really great if it detected your connection speed and defaulted to a larger set if your connection was fast enough.

You get next, previous and a total of pages.

I like clicking the green box highlighting next. I don't know why, I just do.

What isn't good is the same issue we saw with Amazon. Once you get in a few pages it is difficult to get back to the earlier pages. Although, the number of possible pages on this site is much less than Amazon so, it isn't as bad.


aaaaaaannnnnd......

Our winner today is Anthropologie. Yeah!

I'm now on the hunt for a site that doesn't do what both of these two failed at today. If you have an example please send me a link!

(the 3 items at the top of the page are on my wishlist)

If you only have one day......

One of the great quotes in the UX world is " Do a usablity test now!" -Mike Kuniavsky, Observing the User Experience

I hear these words in my head often and what I think's at the heart of this statement for me is that we aren't always going to have the most perfectly written contract that allows lots of time and money to perform exhaustive research or set up week long usability tests but that doesn't mean that we can't find anyway possible to to bring the perspective of the users into the conversation and have this perspective influence the project.

The other night I was asked by a younger practitioner how she could best use the one day she had been given to perform research. This one day was to be the following day and the audience was specific enough that using her coworkers or friends wouldn't be much of a help.

This is what I told her.

"What you really need to do is find a way to bring the user perspective into the conversation. This is can be done in a lot of ways, many of which you don't have time or resources for.

The two things I would do tomorrow is.

1. Define the users. You have to state out loud and clearly who the project is attempting to serve. Use all of the materials from the client, review the RFP and SOW, talk to anyone you know who has knowledge of the industry, do some online research, get on the phone with the people at the buisness who are closest to the users (customer service, human resources, sales people, etc.)

Then write it up, create a chart, draw a picture. This document will bring the user into the design and strategy conversation, allowing everyone to refer to each group when defining functions and needs. This document may also be super contaversal. This is great. If people get up in arms and start arguing about who the users are and what thier needs and motivations are then you've done your job. You might actually get some money and time to do real research!

2. Do a competitive review and heuristic evaluation of the competitors and other players in the user's ecosystem. Understanding how other companies are communicating to the same users can leverage the work already done in this particular industry. Taking the time to mapout and review all the other places the users are participating in and what these environments are like can tell you a lot about the expectations of the users.

You can also use this work to start conversations about the structure and functionality of the site, by showing examples from competitors sites."

What advice would you have given?


One last thing, I can't mention Ecosystem without pointing you toward this:

from Web Social Architecture article: A Conceptual Map of the Social Web

This does a great job of opening your mind to all of the influences and exfluences* a user may have. This is focused on social media, but is there anything else anymore?

*yes. i made this word up. it means all the things the user spends time putting out in the world. this probably warrents a blog post of it's own.

Data Visualization Ptown Style

I attended the first Data Viz group last night it was less and educational experience and more a night of posing questions, which was kinda fun. I was super impressed by the turn out and the variety of folks who had a true interest in this sort of thing. So wonderful!

Here are the little sparks I took away and am thinking about:

*Expressing ideas vs. Expressing data

*Making a connection with someone or something that generates ideas is a good interaction, and could be called art.

*What types of things can we as designers do to develop your trust in the data?

*Try to merge the gap between useful and beautiful.

*Reduce the time it takes to understand.

*Clients don't understand what they are paying for. Could data viz give them something to appreciate?


I also wanted to mention as I did last night, if you are into innovative ways to display a ton of information in a beautiful and useful way I would encourage you to spend sometime with State of the Salmon created by local agency Periscopic. I caught a presentation of it at PDX Show and Tell a while back. There did happen to be a woman from the agency there last night and she spoke up once I mentioned the site, she will hopefully be presenting at the next meeting.


This article was making it's way around twitter today too.
Data Visualization Is Reinventing Online Storytelling



(image is from State of the Salmon)

UX and the major considerations of web strategy/design

I'm working on a diagram that illustrates how the major consideration of web strategy/design (also a working concept) should be addressed by the tools of a User Experience Architect. This is the first piece of a presentation I am developing on the topic of "Appropriate use of the User Experience Architect" or "How to plug UX into a project or agency and get value, make life easier for everyone and end up with better products."

If you have a moment I would love your feedback.

Couple things before you start.

1. This is a draft
2. It isn't meant to consider every little detail but stay at a certain big picture distance
3. I'm not stupid, but it is possible this isn't totally right. That's ok, I'm practicing shameless collaboration and artistic expression by not editing myself too much and assuming you folks can fill in the blanks without me over explaining.


click to make bigger.
The Five Considerations:
Brand Needs: Content, features and design choices that support the goals of the brand, reinforcing the correct perceptions and enriching the user's experience.

Business Desires: What the business wants in order to grow, increase profit and realize company goals (not necessarily digital/web goals).

Technology Needs: That the new solution utilize available tools and/or implement "appropriate" new tools within a specific budget.

User Desires: What the users think they want. Stuff that gives them an emotional reaction and satisfies their expectations.

User Needs: The essential tasks the user is trying to accomplish, which must be completed with ease and clarity.

Industry Ecosystem: What's going on in the larger ecosystem of the business and the users. How and where this digital presence will fit in and contribute.

Tools & Methods
Business Strategy Definition:
Stakeholder Interviews, Goals and Tactics Definition, Multi-year roadmap development, Competitive Research.

User Research: Quantitative and Qualitative methods. Interviews, surveys, usability testing, focus groups, card sorts. Audience segmentation, Tasks analysis, Flows.

Information Architecture: Site structure, content organization, taxonomy, utilize analytic data, collaboration with back-end developers.

Interaction Design: User centered design, industry standards, best practices, collaboration with graphic designers and front end developers

version your thinking

Try this next time you are working through a problem or developing a new design in Omnigraffle.

Each time you add another major component or your mind flips around and you start another approach, just duplicate the canvas you are on and keep going. This will save all the various versions of your thinking with out interrupting the zen like trance you took 3 hours getting into.

Then when you have to stop to go to a meeting you can review your thinking and get right back to where you were.


p.s. i went cold turkey off Viso a couple months ago and i have never looked back!

super cute

loving this cute and smart display of video controls. i'm inspired to get a bit more creative with these controls next time.

it is sad that there is no status bar and the fast forward button (or is it reverse) doesn't work. But I like this concept.

While we're talking about videos, I'd like to raise a question. When is it video a good way to express an idea? Using video is becoming more and more popular and clients are asking for it left and right. I'm working on formulating a perspective on it's use. I have some ideas.... what are yours?

(i don't really have readers yet...i do know that...but it's still fun to ask question, then go lay my head on a pillow and think about them)

via: The Right Brain Initiative

Wireframe Magazine

Hey, have you been reading Wireframe Magazine? If not you should be. It's an excellent way to peek into the deliverables of IA's and UX people around the world. Jakub the author is doing and excellent job curating submissions and creating dialog around the technics.

I feel super honored to have a little piece of my work featured today. It's a Bubble Wireframe with priority indication. I must take a moment and credit the person I learned this from. Yeah, Elena Moon! a cowork of mine when I was at Zaaz.

The big take away from this deliverable for me is that we need to have a variety of ways to express the research, information architecture and stragegy we work so hard on, to the graphic designers. With this particular project I had a super collaborative relataionship with the graphic designers, we worked together daily and they were present during all the strategy work I conducted, so there wasn't a need to get too perscripted in the wires. I wanted to provide a road map to them and not hinder the creative process of graphic design. The client was also in the middle of rebranding so we didn't have a clear directive on visual elements at the point that I made this, so I couldn't even begin to make decisions around navigation design or page structure.

Do you use this method?

Pagination #1

I'm going to start an ongoing series on pagination. i know, it's not that sexy but every time I need to design one i tend to have to rethink it all over again and then find examples to plead my case with my graphic designers.

Bad:Why? because the easiest thing to click on is "Last >>" but this isn't the most desired link. It takes some focused mousing to click the little 1 2 3 4 5 or the >> next arrows, all of which are the more likely desired links.

It is showing which page you are on and how many total pages their are so they get a bonus points for that.


Better and Interesting:

from Qik

The Next and Previous buttons are easy to click, although I still think the Beginning and Last links shouldn't be equally weighted to the Next and Previous, but a good argument could be made depending on the content (and it looks nice).

What I really like about this, is being able to just type in the page you want to jump to. So many pagination designs will only show you the next 3-5 pages (see above) so if you want to jump way a head, to say 17 you have to perform a few annoying clicks.

brighter means select?

What is the current standard for showing where you are and were you can go? This site (which is lovely by the way) uses the bright yellow to show to show active links. But while I was there my mind kept getting really confused. I expected the place I was to be highlighted and even though I realized what the convention was I couldn't quit making mistakes as I navigated around.

What do you think?

hm

"...an optimal number for comfortable reading lies between 60 and 80 symbols per line."

- Smashing Magazine
from, Apply Divine Proportion to Your Web Design

is this true?

Keep me entertained

Just had a nice little web experience. I was connecting my Netflix account with my Jinni account and while that little process was happening, Jinni played me a movie clip. It wasn't advertising just a little fun entertainment while I waited. It even said something like, "Enjoy this movie clip while you wait."

Really nice idea, much better then an hour glass or even a cool visualization. I could see using this time to educate about new features, reveal interesting information about the company, express the the company values by providing some air time for your favorite good cause.

Coffee Recommender

Fun and simple little tool for helping you select a product you will like.

It doesn't have have to be complicated or expensive to add another dimension to the shopping process.

Try it.

Forces inside your control

Another place UX plugs in and can really be of value to our clients is helping them understand the full landscape of their marketing initiatives and the best way for digital to lead or respond.

This passage is a great example of this.

"Cycles can also alert you to the presence of negative forces, acting against growth. For example, advertising campaigns drive sales, which can increase the load on a poorly designed logistics and customer service system, resulting in unhappy customers who spread the word about their poor experience, thereby reducing demand on the logistics and customer service teams. The net result is that the volume of sales rises, then drops."

Thanks UX Matters!


Photos from here via Notcot