Blog

Because a mind is a terrible thing to waste?

UXmas 2013

Thirst Studios and UX Mastery kicked off their UXmas 2013 user experience design advent calendar. Every day throughout December in the lead-up to Christmas, a new ‘gift’ to the UX community will be revealed. It could be an article, a video, a sketch, or something else.

http://uxmas.com/

What do you call...

After repeatedly using a pattern of term + description to describe something, I wondered if other people in my Twitter-sphere used the same or similar language to describe a common artifact.

My question started:

I was wondering if people used different terms to describe either drawings made in software or on paper that describe a screen view at a high level of abstraction that uses only lines and labels.

Accompanied by this screenshot:

It's interesting to learn that we use so many terms to describe essentially the same thing, although some of the confusion in this discussion might be with understanding what I meant by my question:

Flow Diagrams, Low Fidelity, Doodles and Notes, Page Maps, Schematics, Storyboards, IA, High Level Concept, Gray Box Wireframes, Whatever the client calls them, Boxes and Lines, Blockyframes, Scribbles on Paper, Blueprints, Page Zones (also Zoning and Zone Diagrams), Models, Conceptual UI Sketches, Thumbnails, Sketches

You can imagine the challenge we have educating about the pieces of a design process when the language is so variable. The thread is captured at Storify.

How GitHub Uses "Deprivation Testing" To Hone Product Design

Fastco interviewed Chrissie Brodigan, design and UX researcher at GitHub to talk about how they're using deprivation to study people's reaction to removing elements from a product.

The gist of the technique is to work with a set of participants who develop a pattern of use around a feature or design characteristic and journal their experience. After some time, at a point when they've had time to be accustomed to that thing, they take away or alter it, and observe through the journal what the users' reactions are to its removal.

It seems like A/B testing with a greater focus on qualitative measurement. Deprivation could be a powerful factor and tool for assessing value of features on both new and existing products. Designers and developers get to measure the features by removing them, and seeing how upset their users get within a controlled group. Removing features from an existing product is difficult, but the upside in measurement could be that features that have a cost to the user or vendor might turn out to be unnecessary, or the research could lead to improvement.

This is technique is new to me, but I'm not unfamiliar with the pain of having features removed for me, or the backlash you can experience when you change something as a designer.

http://www.fastcolabs.com/3010972/open-company/how-github-uses-deprivation-testing-to-hone-product-design

How to give constructive design feedback over email

I can't imagine email ever being the right way to critique design, or give feedback as a client, but nevertheless it happens, and Julius Tarng, who works on the Branch app, came up with some good advice for those about to give email, and those about to receive it. I think the advice applies for any feedback that's not face to face to face including chat and in comments.


  1. Get on the the same page

  2. Talk about what you felt, not what you think the user will feel

  3. Use past tense, not present

  4. Question constructively by asking for opinions, not challenging them to convince you

  5. Try to be specific, and avoid subjective words

  6. Don’t be dramatic

  7. Give the design some time, and ask yourself if that email needs to be sent now

Don't just read this list. Read the article at Medium.

https://medium.com/building-potluck/be7ebb17deff

Presentation Skills Considered Harmful

I don't like public speaking. I love talking to people one to one and in very small groups. But public speaking and me don't mix, and if you've ever seen me speak, you probably agree. In the handful of times that I have spoken publicly, I think only two were really worth coming to see and hear.

I believe the only reason the worthwhile talks were not utter failures was because I had something to share that I think people wanted to hear, and could get something out of. They really had little to do with me. I think those talks had more to do with what the audience could do with what I shared. My passion about the topic let me forget about myself until I was just basically just giving people something they wanted instead.

Kathy Sierra is one of the people whose articles I like to read and presentations I like to watch, because I come away with ideas that I feel I can do something with. There's something almost pragmatic to me about what she shares. Don't get me wrong though, she is a charismatic, funny, and super smart speaker. But her post about public speaking and presentation skills is useful to me as someone who hates public speaking, and always feels bad turning down the invitation.

Here's the message: If you imagine that your role in speaking is to be the delivery mechanism for the message/story/whatever, you become the UI for the User Experience of that exchange between you and the audience.

Ultimately, I think this thought sums up what the role is about:

It's not really about the user experience they have during your presentation. Like your presentation, their experience of it is also just the enabler for something bigger. Because what matters most is NOT the UX but the POST-UX UX. What happens after and as a result of the user experience? ... What happens after what happens happens?

When they walk away from the user experience, then what? Are they different? Are they a little smarter? Are they a little more energized? Are they a little more capable? Are they a little more likely to talk to others about it?

Maybe there's hope for me after all? I like this idea of the post-UX-UX, when it comes to products or presentations. At the end of the day, while the delivery and execution are very important, your presentation skill holds much less weight than how you've impacted the user.

And this brings me back to why I got into working in this field to begin with. I started professional life working on libraries, and wanting to help people find information that helps them do things that fulfill needs in the real world, outside of the experience of using the library. What I do still comes down to that, and I guess public speaking should be no different.

I'm still afraid of being the awkward kid at the head of the class, even if I know the material. But maybe next time, I'll just imagine myself as the UI, and the rest will fall away.

http://seriouspony.com/blog/2013/10/4/presentation-skills-considered-harmful

Alfred/Hazel Workflow for Screen Capture

If you take a lot of screenshots on a Mac like me, you probably have a good workflow for doing it using something like LittleSnapper/Ember, Awesome Screenshot or Skitch. The biggest problem I've had is that after I take a screenshot, I often want to do something with it. I can do this by just getting Cloud to watch and upload files passively, but I've always wanted to save to my own server after just issuing one command to capture the page.

I love Alfred. Launchers like Quicksilver and Alfred are what I think of as the best minimal UI apps that I use on the Mac. I finally got around to searching for a way to capture a full scrolling screen from it and do something with the output.

I found an excellent Alfred workflow by user moom on the Alfred Forum that uses a shell script to run Webkit2Png in the background. It's awesome. I just copy the URL of the page I'm on, summon Alfred with a few keystrokes, and then it gets captured, optimized, and uploaded to my server in the background. I made a video of the workflow showing Alfred, Hazel, ImageOptim, and Transmit working together with lots of spit and chewing gum in case anyone else has this need.

It's a lot of steps to set up, but if you have this need, you'll appreciate it. ;) You can modify the steps for your workflow to move it to note in Evernote, to Cloud, or wherever your heart desires. Download the workflow here.

If you're interested to know how I modified the workflow, these are the options I used:

python webkit2png -F -W 980 --delay=5 "$(pbpaste)"
ls *.png | grep -v icon.png |
xargs -I {} mv {} ${HOME}/Sites/media.konigi.com/snaps/2013/

-F -W 980 outputs a full scrolling screen at 980px wide. You can see what the options are by running this command in the terminal: webkit2png --help.

https://vimeo.com/72290954

Making Infield Form Labels Suck Less

Jackson Fox and Jeremy Fields did an excellent 2-part write on the use of "infield" labels at Viget. There are several techniques for placing labels inside the input box. For varying reasons we may want to avoid the label on top or side positioning, but as Jackson points out, the infield placement can be problematic.

Part 1 talks about the problems using infield labels. Part 2 shows how they deal with the problem by using a visible tooltip that doesn't obscure the input, with a jsFiddle snippet to play with the code. You can download the jquery plugin from Git.

http://viget.com/inspire/making-infield-form-labels-suck-less

Link Drop, June 2013

Not a lot of bookmarking this month.

Link Drop, May 2013

Link Drop, Apr 2013

GoodUI Newsletter: Ideas for getting good conversion rates

Jakub Linowski, creator of Wireframes Magazine just started writing a newsletter called Good UI on how to design sites that are easy to use and also yield high conversion rates.

He's looking at how to employ practical ideas that satisfy the business side as well as the people using it, which I'm sure is something we all want to do on sites that sell a product or service. He plans to publish the newsletter monthly. Check it out.

http://www.goodui.org

Sketch Template for Mac App Design

About this template

This is a template for doing desktop application design using Sketch, a vector illustration tool for the Mac.

The idea for sharing this template is to give a quick starting point for anyone who wants to create their visual design comps in Sketch. When I started using Sketch to design and export controls for an iOS app, I quickly started liking the application, particularly the styling properties, simple vector editing and combination features, and the well thought-out grid and export capabilities. Moving on to a Desktop project afterwards, I started to experiment with using Sketch for design comps as well, and have decided to try using Sketch rather than Photoshop.

How to use it

NOTE: This file was created using the latest build of the Sketch Beta, so you will have be using the Beta to open it currently.

The template provides the starting point for creating visual design comps and includes an application window with a few basic elements: window, scrollbars, window title and several icons, sidebar, some styled text, system buttons, radios, and checkboxes. You can copy the styles for some of the elements and save them to your style presets to create others.

The template provides a 1024px x 800px artboard with a Comp slice that’s ready to export your entire app window. There’s a 12 column grid with 60px columns, 25px margins, and 12px padding on the horizontal edges.

You will likely need to modify this template—it’s only meant to provide a demonstration of what you can do, and a starting point for new projects.

Download the zip file and extract it on your Mac. Open the file in Sketch.

You can use the menu File > Save as Template… if you want to save it to your templates.

screenshot

screenshot

Download the Template
This template is free to use, but may not be distributed without permission. If you like it, a donation is appreciated.





Link Drop, Mar 2013

Static HTML: The new old school

I've been looking for ways to energize my creativity in between the longer stretches of time spent on difficult, routine, and less creative work. The thing that has been doing it for me lately is working with static html on some of my smaller production sites.

I was playing around with static html tools for a little side project I've been toying with. I was tinkering with Stacey and Kirby. Awesome tools for static PHP page building. I was also playing around with CodeKit, which looked like the most promising tool for little projects. But I figured it was all just playing and there wouldn't be a real static site project for me to work on for a while probably.

Then last month we launched UX Apprentice using WordPress. We were on a stable server that hosts some pretty massive sites, so I was happy. But then, as web hosts always do, it went down for a short period. Some rare issue on load balancers was the cause we were told. Downtime happens. But then while discussing this issue I said, "Fuckit. This site is so simple, let's make it static and put it on an S3 bucket."

A week earlier I was playing with Hammer for Mac, the latest static site builder I had found. Among my options, including just doing it all by hand, this was the simplest of them all. I looked at what I would need to port the site to Amazon's S3 service for websites with no fuss. All I needed to do was suck the WordPress site down and convert it to static HTML.

I know this is small potatoes compared to the bigger things people are doing out there, but I got a kick out of doing this.

Here's how I did it, in case anyone out is considering doing the same:

1) Download
SiteSucker pulled the site down for me and converted it to static HTML. You can do it on the cheap with wget.

2) Create a Hammer Project
Look at your downloaded site, and clean out the cruft. Open Hammer for Mac and create your project. Open the source folder.

3) Organize files, use HTML editor to convert PHP to Hammer-smart stuff
I then moved my img, css, and js folders to the new project's assets/ folder. When Hammer builds, it reads your entire project and then knows where everything is so you can use the @path directive to reference files only by name, and include styles and css simply by name without paths using the @stlylesheet and @javascript directives. I cleaned all files up to use this.

I did the find/replace grunt work using Coda on my CSS and html files. Replaced the PHP that I use in my header to use the @include directive and the $title variable. My SCSS files got picked up and compiled with no problems. I then used the @path helper on images in my SCSS.

About two hours of this clean up and it built with no errors.

All my SCSS was compiled, my includes worked, and my CSS and JS were optimized (combined and minified).

4) Testing
I set up my hosts on my machine so I could test locally in the browser so all the TypeKit would work after I added that domain. I also learned that you can't test Typekit with a url using the file:/// protocol. Bummer. I already use VirtualHostX which makes simple work of managing multiple hosts on your local machine. It edits your httpd-vhosts.conf and hosts file. I had bought it originally because the web sharing option went away in OS X, and I'm too lazy to edit files just to turn PHP on.

Then of course, I tested on all my browsers and tested the responsive layout. We were ready to go.

5) Publish
Publishing on S3 is pretty simple. A normal person just needs to set up a bucket and use an S3 aware FTP app like Transmit and you're done. We ended up commiting it to a repository that is watched by a server that kicks off updates to S3 for pages that have changed.

That was the whole mini-relaunch that happened quietly after we launched UX Apprentice. We were live on WordPress for a week, and now we're hosted on an AWS instance and I expect the uptime will be awesome—as good as any S3 site. We do the same for our main balsamiq.com site and every time I see our blogs report downtime, I feel this wave of relief knowing our static pages on S3 are happily being pushed out without issue.

Anyhow, that made for an exciting day last week. It's energizing to feel frustrated by something and quickly turn something around that's better. And for anyone that's doing UX work that's looking for a decent HTML prototyping workflow and knows enough SASS and JS, Hammer may be the thing for you.

Link Drop, Feb 2013

Link Drop, Jan 2013

Switching to monthly link drops rather than weekly.

Text Snippets

About

This is a work in progress. I'm copying over my commonly used text snippets and wireframes as I go.


People's Names, Sorted

10, First Name
  • Andrew Lincoln
  • Chandler Riggs
  • Danai Gurira
  • Jon Bernthal
  • Lauren Cohan
  • Laurie Holden
  • Michael Rooker
  • Norman Reedus
  • Sarah Callies
  • Steven Yeun
10, Last Name
  • Jon Bernthal
  • Sarah Callies
  • Lauren Cohan
  • Danai Gurira
  • Laurie Holden
  • Andrew Lincoln
  • Norman Reedus
  • Chandler Riggs
  • Michael Rooker
  • Steven Yeun
20, First Name
  • Adam Minarovich
  • Andrew Lincoln
  • Andrew Rothenberg
  • Chandler Riggs
  • Danai Gurira
  • David Morrissey
  • Emma Bell
  • Irone Singleton
  • Jeffrey DeMunn
  • Jeryl Prescott-Sales
  • Jon Bernthal
  • Lauren Cohan
  • Laurie Holden
  • Madison Lintz
  • Melissa McBride
  • Michael Rooker
  • Norman Reedus
  • Sarah Callies
  • Steven Yeun
20, Last Name
  • Emma Bell
  • Jon Bernthal
  • Sarah Callies
  • Lauren Cohan
  • Jeffrey DeMunn
  • Danai Gurira
  • Laurie Holden
  • Andrew Lincoln
  • Madison Lintz
  • Melissa McBride
  • Adam Minarovich
  • David Morrissey
  • Jeryl Prescott-Sales
  • Norman Reedus
  • Chandler Riggs
  • Michael Rooker
  • Andrew Rothenberg
  • Irone Singleton
  • Steven Yeun


Wireframe Symbols

Download Balsamiq BMML file

Link Drop (Weeks 47-52 2012, 1-3 2013)

Crazy big link drop because the world gets crushingly demanding of one’s time around the holidays, and it takes time to recoup.

Wisdom from a dog

This is a good bit of advice for kids and adults alike from Jake the Dog. Adventure Time is my son's favorite show, and one of mine as well. I made the print for his birthday, and will put it on of our walls. I like having the reminder every time I feel discouraged when starting something new.

You can see the extended version on YouTube and purchase a print at Society6.

What are your favorite customer support sites and why?

What I’m doing
I’m doing a review of customer support sites, looking mostly for software (desktop and web) and services-related sites that provide a customer support site for getting answers to questions, and viewing documentation and tutorials.

Why I’m doing it
Some sites have better search capabilities for questions than others. Other sites do well at presenting documentation. I’m finding that there’s sometimes a difference in how companies handle giving answers to the most granular questions as opposed to presenting a unified view of a product via a manual-like experience. There’s a smaller/larger need, first time/experienced user dichotomy of needs, among other different descriptions of how and why a user approaches a support site. The need may range from “How do I do X” to “How do I get started using this” and every grayer need in between. I’m currently involved on a project where this is the problem we’re faced with as the company has gone through several stages of growth, and needs to evolve legacy content and systems.

Can you help?
What are you favorite support sites in terms of these kinds of needs? I’m going to screen capture and review a handful of them here and show a cross-site comparison of capabilities. As a bonus, I’m doing a giveaway of a couple sketchbooks from those who comment.

Please give me the name of the company and the URL for the support site. And thanks for helping out!

Some of my starting points

Empty once again

Today I took my first mountain bike ride near my new home in Marin County. Humbled, mud splattered, and soaked from not making it through several streams, I paused to reflect on how different the place that I'm in now is from where I was a year ago.

I spent a wonderful 3 months living on the side of a hill looking onto Mount Tamalpais in Marin with my family re-connecting with nature, and discovering the joy of living with only several bags of possessions and a new slate. With my new place and time in life, and after the small temporary move to search for a home, and a final move to that place, I'm finding myself looking, exploring, putting things in new places, getting rid of more possessions, and finding inspiration in unfamiliar spaces. I've been surprised by how easy it is to adjust, and by the many kind people willing to accept this odd, seemingly misplaced city boy in this slower paced town.

Over the past few years my voice seems to have gotten quieter on this site. I started blogging less, pointing less, and talking less. If you've met me in real life, you know I'm already a person of few words, so my voice now feels like a whisper. With the move away from city living, I also feel less inclined to do, in reaction to what's happening around me. I feel like I'm looking for the things that I want to focus on doing. I also feel like the first few years of this blog have been about recording and continuing to define things for myself. But it also feels like it's time to learn anew and make again—to empty my cup as I've done so many times before.

Best wishes for an amazing new year, everyone. May it be full of creative wonder, meaningful failures and satisfying successes. Here's to starting over and putting a few more miles in these legs to make it through the tough spots.

Link Drop (Weeks 45, 46)

      <ul class="ld">
         <li><a href="http://joshduck.com/periodic-table.html" class="ttl">Periodic Table of the Elements - Josh Duck</a> </li> <li><a href="https://www.youtube.com/watch?v=JNjnv-Gcpnw" class="ttl">Angelina Fabbro: Inspector Web and the Mystery of the Shadow DOM -- JSConf EU 2012 - YouTube</a> </li><li><a href="http://icomoon.io/" class="ttl">❍ IcoMoon</a> </li> <li><a href="http://layervault.tumblr.com/post/35721297597/early-sketches-from-the-webs-finest" class="ttl">Early sketches from the web's finest — LayerVault Blog</a> </li> <li><a href="https://github.com/xdissent/ievms" class="ttl">xdissent/ievms · GitHub</a> Microsoft provides virtual machine disk images to facilitate website testing in multiple versions of IE, regardless of the host operating system. Unfortunately, setting these virtual machines up without Microsoft's VirtualPC can be extremely difficult. The ievms scripts aim to facilitate that process using VirtualBox on Linux or OS X. With a single command, you can have IE6, IE7, IE8 and IE9 running in separate virtual machines.</li> <li><a href="http://www.theuselessweb.com/" class="ttl">The Useless Web</a> </li> <li><a href="https://www.uberconference.com/zDpYgEZZ" class="ttl">ÜberConference - Free Visual Conference Calls</a> </li> <li><a href="http://uxstage.com/" class="ttl">UX Stage</a> Click through prototyping app for iPhone.</li> <li><a href="http://www.theinteractive.it/" class="ttl">the Interactive - Stories of everyday interaction</a> </li>
    </ul>

Link Drop (Week 44)

If you can, give to the Red Cross to provide support to Hurricane Sandy victims, and help elect a president who will keep FEMA in tact.

Link Drop (Weeks 40-43)

This is a rather long link drop because I’ve been doin stuff.

Sketching Interfaces: Speaking notes and mini book

I gave a talk at Asbury Agile 2012 and have published my presentation deck and speaking notes as a zine-like mini book in a new section of this site. My friends on Instagram have seen me teasing out this talk for a few months now, and I'm happy to get the ideas out because this is something I've been thinking about ever since I started this site.

This is the perspective of someone who is starting over and taking the beginners path. Check it out.

//konigi.com/wiki/sketch-book/

ASIS&T Bulletin: IA Issue (Oct/Nov 2012)

The IA Issue of ASIS&T Journal is out, edited by Thomas Haller. Here’s a listing of articles in this issue.

  • Information Architecture in the Age of Complexity, by Andrea Resmini
  • The Architecture of Information, by Martyn Dade-Robertson
  • Optimizing Websites in the Post Panda World, by Marianne Sweeny
  • A Metaphor for Content Strategy, by Carrie Hane Dennison
  • How to Start Sketchnoting, by Veronica Erb
  • A Conversation with Eric Reiss, Author of Usable Usability: Simple Steps for Making Stuff Better, by Thom Haller

Get more info about this issue of the Bulletin or Download the PDF.

http://asis.org/bulletin.html

Visit gifmuse
gifmuse.io
Say Hello

Sign my guestbook and share a random, weird or inspirational message or whatever is on your mind.


Blogroll