Tag: Design
Screencasting! It’s the teaching medium that’s sweeping the nation!
I love screencasts. Certain ones, anyway. Done well they enrich understanding. Done wrong they’re a snore and a half. I’m in the middle of redesigning Jetrecord and the more I redesign the more I’m considering redoing it from the ground up (and doing some screencasts about the process).
Why? Well, I’m looking at all the shortcuts I’ve taken to get to where Jetrecord is today and frankly, it’s embarrassing. Don’t get me wrong. I LOVE Jetrecord and I think it’s both a great idea and a great product. I just think I can do better. I owe it to my customers to make it the best it can be.
I’m also one of those people who loves great foundations; well, I love the idea of great foundations. I love talking about foundations, dreaming about them, planning them, scheming. But when it comes time to build the application I get so focused on delivering a great experience and a great product that I glance right over the possibility that I may change my mind on a few foundational things, that people involved in the project come and go, that features come and go, et cetera. I know it’s impossible to plan for everything but I know there are some things I could do a whole lot better.
When I build an application I put a whole lot of time into building great user experiences (I try, anyway) and just enough time into making sure the application keeps chugging along. I tell myself, “it’s not a problem until it’s a problem,” which is a great way of looking at life for most matters. 80% of the time, we really don’t need to plan for all the contingencies we plan for. Of course, it’s that scary 20% that keeps us awake at night with a death grip on our Blackberries waiting for that 3am email from the error system. (Thanks, Internet!) An example of a 20% problem would be the current financial crisis in America. We were doing fine ignoring the underlying foundational problems for a while but now it looks like we picked the wrong year to stop sniffing glue. So when it’s a problem, it’s a real big, fat, hairy problem, with mutated teeth growing out of a tumor in your stomach.
Granted, most of us don’t encounter these problems. For small, local, mostly internal applications, applications in which we and maybe 20 other people are the only users, the 20% problems can usually be contained. It’s when we move into the realm of needing to support thousands of users in multiple countries on a 24/7 basis that we start encountering the mutant teeth kind of problems.
Jetrecord isn’t quite the super-multinational app yet but I believe it’s going there. It will, I tell you!!! Moreover, I’m at a place in its development where stopping and doing the right thing makes sense. I’m redesigning anyway and my plans already involve a better foundation. If I wait until it actually is supporting 20,000 users in 20 countries, I’ll have quite a job on my hands. I’ve racked up some code debt and it’s time to pay it off–and start saving a little.
But why do a screencast about it?
For one thing, I’ve been a code leech for most of my career. I’ve written a couple free things here and there and released them into the wild but nothing too substantial. Mostly I’ve read other people’s books and articles, attended other people’s conferences, and taken other people’s free code samples. And truly, all of these things have taught me a lot and I wouldn’t be where I am without the generosity of many, many people. But I think it’s time I did something substantial, extraordinary, and excellent for others.
Second, it’s going to force me to write the best code I can. I’m embarrassed during code reviews if there are glaring mistakes so I’m going to try hard to make sure it’s worthwhile code because it’s public. I already know I’m going to have to do a lot more research to find best practices and I’m sure I will make mistakes and I hope someone will be kind enough to suggest improvements. This will benefit me and you as coders and ultimately it will benefit the applications we build and the clients and the users we support. Win-win-win-win-win.
Lastly, I’ve been doing screencasts since 2001, since before they were called screencasts. In one of my previous jobs we were publishing “help videos” in Camtasia on our web site to show users how to use the site and some of the software products we supported. I consider myself knowledgeable enough to make a good video, or at least, to give it a go. Whether they’re actually good or not is up to you.
Having said all of that, I still haven’t fully settled this in my mind. I want to do it. I know it would be good. However, screencasts take a lot of time to do right. For every minute of production video there’s 30+ minutes of material and mistakes that don’t make it in, not to mention planning, outlines, scripts, research, creating or finding other media like music, artwork, and extra video. Then there’s editing, producing, and finding a place to host it. It’s not unlike being a T.A. in grad school. You’ve got this whole other full-time teaching job to do while you’re trying to complete your own studies. (At least, that was my experience.) It’s both fantastic and super-sucky at the same time. And you don’t get paid!
So, if the series is going to show up, it’s going to show up here on this web site, and probably very soon because I’m already building the foundation for the next Jetrecord (which is going to rock, by the way; if you’re a pilot, you should use it). If I wait too long, I definitely won’t do it.
Okay, thank you, and now for my next anti-climax…
I took it. You take it.
You can copy my answers if you want.
Just wondering. Because they do. Uncanny. Here’s Indeed. Here’s SimplyHired. Click around both sites. Indeed goes the way of Google on the home page. SimplyHired shows a little more.
Beyond that, though, the search results, the menus, the layout of items on the page, they all look like they were designed by the same person. Hmmm.
If the book is bad, put it down and find another one. You don’t have to suffer through because someone else said it was great.
If the music is bad, turn it off. Likewise, the movie, the TV show, the play, the game, the skit, the scene, the job, the career, the relationship, the car, the pursuit of endless piles of things, the bar, the campaign, college. Quit the band. Quit the show.
My name is Harry Love and I have some bad news for you. You don’t have time. You’re going to die. You have time for a few songs, a few movies, a few things. You have time to help a few people. You have time for a few causes.
Here’s the test. While you’re doing whatever it is you’re doing, imagine you have two years to live. Imagine yourself on your death bed, looking at yourself now from your death bed watching you doing what you’re doing.
Will you be happy you read the book, sang the song, spent two hours seeing this movie, working that job, played the game? To keep up appearances? To pass the time? Were you really trapped in your position? Was there really nothing you could have done to save your relationship? Or leave a bad one?
Could you really not have given up everything to help those people who needed it?
Just passing time? Are you serious? Just passing time? How much would the death-bed you give for one minute of the time you have now?
No! Make it stop! You never, never, ever put comments in reverse chronological order as the default format on a blog. Never.
Why?
A blog is nothing more than repurposed forum software in which only one person is allowed to post topics and everyone else is allowed to post responses. (Usually. There are multi-author blogs but exclusivity of authorship is still part of the deal.)
A single blog post is like a forum topic. The original poster—in this case, the blog author—writes the topic. Just like a forum, if anyone cares to respond, they write a comment after the original post.
Once a person responds with a comment, the topic is no longer a monologue. It has become a conversation between and among the original author and anyone else who responds. Comments, just like face to face conversations, sometimes also take on a life of their own apart from the original topic, sprouting new threads of thought and conversation which may have only a tiny relationship to the original topic.
Now, imagine going to your favorite forum, clicking a link to a topic, and then being forced to click to page 6 of the responses and going backwards from there in order to begin understanding how the most recent response came to be and how it might possibly be related to the original post. Madness!
Because of this, the only natural way to display comments (in English, that is) for anyone reading the conversation for the first time is to display them in chronological order. Outside of clever methods of interface design, the simplest way to solve this is to write left to right and top to bottom. Even though it may not be linear in thought, a conversation is always linear in time.
A Case of Incorrect Form Following Function
The reason many people display comments in reverse chronological order is because they want to show what’s new at the top. The problem is twofold: they are trying to make the list of comments perform two functions and they are not solving the desired function with the best form.
The primary function of a list of comments is to facilitate a conversation. New comments come after old comments. Again, in English we write left to right and top to bottom. Always remember that: the primary function of a list of comments is to facilitate a conversation.
Reverse chronological comments, however, are trying to make a list of comments perform a secondary function, “Show me what’s new in this conversation.” The form they have chosen to solve this function is, “Display a chronological conversation in reverse chronological sequence.” While this solves the problem for exactly one case, the case in which a person has read every comment except the last one, this makes no sense at all for any other case.
Solutions
There are many ways to show people what’s new. Currently, the two most popular are RSS feeds for comments and email notification. There are also several third-party web services that track conversations in comments and attempt to display them intelligently. Another way would be to allow people to sort the list of comments based on time (with chronological order as the default).
While it’s true that some people display recent comments on the index page of a blog, this has an entirely different purpose. The purpose is to show what’s popular by showing what’s recent. In doing so, blog owners are hoping you’ll be intrigued by the latest comment, click the link to read the related post, and join the conversation. But there is absolutely no way you can understand the conversation by reading the most recent comment out of its context.
There is probably much more that could be said about this: the technical details, the usability issues, the lovely diagrams with lines and arrows showing page flow, but I’ll leave that to someone else. I’ve said my peace.
If I encounter reverse chronological comments on your blog, I’m not reading the comments. Sorry, it’s not worth my time.
I’m curious. Because newspaper is a medium. The reason newspapers have layouts that look like crammed, painful columns on the page is because it costs money to print them and they usually have more content than space available. Necessarily, the layout is based on the need to fit as much content as possible in a small space.
But web sites don’t have this constraint. Yet, newspaper web sites still look like their printed relatives.
Wouldn’t it be better to layout the web site around the content instead the content around the web site?
You can follow me on Twitter if you like but I’m not posting Twitter updates here anymore. Also, no more Delicious updates.
I’m slowly redesigning is why.
Note: I wrote this on a whim, not having researched and not having proof. This is a hypothesis of sorts. If you know relevant sources, please advise. After writing this I have discovered this is a plea for the creation of a system of recording and playing back conceptual discoveries.
On Discoveries
Discoveries have a predetermined path of several steps which must be followed in a particular sequence. A person rarely makes a leap over a step. Usually, what seems like a leap is actually a larger step. Sometimes adjacent steps may be taken near-simultaneously, thus appearing that a step was skipped or, perhaps, that the adjacent step was somehow foreknown or assumed. Of course, this is possible. But certainly, without knowing that we have jumped a step (how awesome are we?), we should assume that each point of discovery we make is adjacent to the previous step, regardless of the amount of work necessary to make the step.
I do not say these things to give an individual less credit than is deserved but only to point out that we should not give ourselves more credit than is deserved. Discovery is best made in humility, lest we be humiliated.
The moment of discovery, the a-ha, the oh-I-see-now, is what convinces an individual to change opinions and beliefs and is preceded by a number of smaller pre-discoveries. These discoveries must be made by the individual and cannot be forced upon an individual any more than love or hope or any type of real or abstract knowledge can be forced.
On that last point, I mean to say if we are trying to convince another to join us at our current position along the path of discovery we will be unable to do more than describe our position. And certainly we should if there is interest, even though we know most of that description will fly over the head of the other. We can explain the steps we took to arrive at our position and let the individual decide to take them or not. But it is of no use trying to help another cheat their way to our position (or worse, to force another to our position). Sooner or later, without the foundation of previous steps to rely on, the individual will wander back to the safety and familiarity of known things.
It is only after discovery, of an individual’s arrival at a new position on their own, that the choice is made not to return to previously held positions, thus establishing a new foundation from which to explore.
On the point of making a discovery all by oneself, I do not wish to ignore the collaboration that takes place between physical, psychological, emotional, and spiritual connections both in and outside the body. That is to say, I cannot will into being the internal connections that form a discovery in my body, mind, soul, and spirit. Just as there are larger macro steps that are taken from one discovery to the next, there are many micro steps which occur internally to aid my movement along the path and while I am a part of them, I do not make them voluntarily. A physical example would be synapses in the brain. Synapses are a part of my physical being and are the junctions of brain activity—where, according to available discoveries, we still assume the connections of thought take place—but I cannot take credit for their existence, function, or performance any more than I can take credit for my parents.
At this point, then, we know that we are making discoveries and we know that at some point in the future we may wish to describe our position and the necessary steps to others. To do so we will need either a perfect memory or some system for recording our discoveries. We can hardly rely on the former. I am not convinced I have seen a good implementation of the latter.
Thus, a system for recording and playing back discoveries and their steps should be made. Moreover, the system should allow individuals to connect their discoveries and steps to those made by others such that old ground is not retread unnecessarily.
I’m feeling it. Time to explore and move forward, to go beyond what I’m currently capable of. To put clichés behind, as if they could be. To ask not what I can do for my country. Escape country.
Background Reading
Designing With Grid-Based Approach
My Approach
1. Determine Your Site’s Main Content
I’m using the epicenter design approach to create the site. In his seminars, Edward Tufte says the only thing that differentiates your site from anyone else’s is the content. Not the fancy graphics, not the layout, not the navigation. So I started by determining what my content is. What is this site’s raison d’être, if you will?
As it is, the text I write makes up the bulk of the content on this site. There are other items from time to time like screen shots and photos, but mostly, I write. Working from the inside out, if people can’t read the text of the articles, the design has failed. So I started with the type as the base element of my grid.
If this site was about photographs, I would have used photographs as the base element. If it was videos, I would have used those. Diagrams, diagrams. Illustrations, illustrations, and so on.
2. Let the Content Determine the Dimensions of the Grid
Having decided that I’m going to use type as my base element, I must determine the dimensions of the type. To do that, I have to make some decisions about the type.
First, it must be readable to me. I’m 34. I wear glasses when I’m on the computer. I don’t have a strong prescription, but when type is too small, I have to squint pretty hard and I find that annoying. I don’t like re-sizing text with the browser: also annoying. In fact, it’s enough to make me use the back button on a site with otherwise good content if the majority of the text is set below 11px.
I’m making an assumption, based on my content, that the people visiting my site are close to my age or younger. Therefore, I’m following this readable-to-me guideline because I can be reasonably sure that if the type works for me, it will work for the majority of people who visit this site. Younger eyes can read smaller type, usually.
What if I discover later my assumption is incorrect? Answer: I’ll redesign. Make a decision and move on. Without more information you can only go with what you know. Don’t agonize over it.
I went with 16px Georgia using a color of #3f3f3f and a line-height of 24px. After playing around I found this combination to be very pleasing. There’s no science behind my decision. (Well, if there is I’m unaware of it.)
The key property there is the line-height. 24px is the basis of almost every measurement on this site, vertically and horizontally.
3. Determine the Maximum Width of the Layout
Most sites these days are opening themselves up to work on larger screens. 1024px is a typical target. I went with 24px * 45, which is 1080px. Done.
4. Layout the Grid
The site must fit somewhere inside of that 1080px. I decided I wanted a content section on the left and a sidebar on the right. Just two columns. I also decided I don’t want to fill the whole screen from left to right. I like white space on the sides. How much white space?
I could set the columns anywhere on the 24×24 grid if I wanted. I decided instead to go with my pal, the Golden Section. Again, I just find it pleasing. 61.8% of 1080px is 667.44px, but let’s round up to 668px just because we can. So, the wrapping div for the site will have a width property of 61.8% and a max-width property of 668px. Why use the max-width property? I don’t want the reading lines to be too long.
What about Internet Explorer 6, which doesn’t support the max-width property? Answer: IE6 was released in 2001. IE8 is about to be released. To Hell with Bad Browsers! (Yes, I know hacks are available to make it work in old browsers. You’re welcome to use them. I have decided to move on.)
Moving on, within that wrap of 668px I still have to set two columns. Golden Section to the rescue again. The left content column is set to a 61.8% width and floated left. The sidebar takes up the remaining area on the right after applying a small 24px gutter between the two.
5. Everything Else
The top margin is 24px. My head shot at the top is 96×96, a multiple of 24. The sidebar text line-height is 12px, half of 24. The margins between elements is either 12px, 24px, or 48px. I’m sure you get the idea. Take the rest of the things you need to layout and look for a way to apply your dimensions in a way that makes sense to you and to the purpose of the site. That’s all there is to it.
Is everything perfectly aligned to the grid? Not really. A few things are out of place. I tweaked a few elements to make them more pleasing when following the dimensions didn’t make sense. As in all things, use your tools and rules and know when to deviate.
Also, I am not a typographer or graphic designer by training or trade. I just pick things up as I go. Take my advice with a grain of salt. And if you know how I could tighten things up, please say so.
Cheers!
I had a realization yesterday after watching John Maeda’s TED talk on simplicity. As an aside, when I mention realizations, I mean the kind of truisms that are evident to a lot of people before I ever get to them. I write this stuff down just to track my own progress, not to announce a great discovery to the world. There you go.
In one of his slides Maeda showed a picture of a beach at sunset with the sky replaced with a 41% gray. “Wouldn’t that be the perfect sky?” he said. “A simplicity sky.” Then he replaced the gray sky with the actual photographed sky and it was a rich mix of blues, pinks, yellows, and light clouds. It was very complex and it was beautiful and much more interesting than the gray sky. I think the point was to illustrate his first law of simplicity: sometimes the simplest thing you can do is not necessarily the best thing you can do. Specifically he says, “The simplest way to achieve simplicity is through thoughtful reduction.”
And it hit me. Simplicity is not about reduction. It’s about focus. It’s about emphasis. It’s about specificity. By focusing on certain details or areas I am declaring what I think is important. I am simplifying by jumping off the broad road and onto the narrow path. And in doing so I may actually step into more complexity, as was the case with the beach photograph, but the complexity will be beautiful. It will be worth it. It’s worth it because we put more time and energy into the things we really care about, regardless of their complexity. Simplicity and complexity are not opposed to each other but intertwined and interdependent.
Semantics? Swapping a negative for a positive? Maybe.
Now, truthfully, focus may include thoughtful reduction but it doesn’t have to. In focusing I am not necessarily removing the excess because it may have never been there in the first place. Focus may simply mean choice. Reduction, on the other hand, always includes focus. “I have all these things and I must get rid of some of them.” That’s an important distinction, I think, and is the reason why I like my version better.
One of the things he said about simplicity I disagree with. He said, “Simplicity is about living life with more enjoyment and less pain.” Not true. I would use those words to describe hedonism but not simplicity. Instead, a simple life, a life of focus, may actually bring more pain. It may bring more complexity. It may also bring more joy, although not necessarily more enjoyment, which, in this case, I think he’s using as a substitute for pleasure. I’ll leave you to think about why that’s true.
Actually, the hovercar is the hovercar I’m waiting for.
From seeing the guided tour and reading the reviews so far, including John Gruber’s and Jason Kottke’s, I’m excited by the changes the iPhone brings to the market, but I’m not excited by the iPhone.
Continue reading …
In 2007 I shouldn’t even have to reach for the Skip Intro link. Web site owners should be skipping the intro for me. Really. Flash intros: 1997. Thanks.
Until they’re fixed, here’s a running list:
- Volt: staffing agency for technical jobs
- 2Advanced: web design company
- Vulcan: investment, development, and real estate (designed by 2Advanced)
Client
Me
Details
Loveoirs is our family blog, a place to keep the Love memoirs. Love-oirs. Loveoirs. See? I redesign the site fairly often. At least once a year, I think. (I use “fairly often” liberally, especially considering this site has been redesigned 5 times in the last year.) It’s a chance for me to practice graphic design in a personal way, a way that reflects our family.
Continue reading …
Client
University of Washington
Details
The MyHealth Toolkit on HealthLinks was created to address the needs of a growing number of users coming to HealthLinks looking for personal health information, a topic that HealthLinks wasn’t originally designed to cover. The requirements called for a simple, clean web site with a new style that would be easy to use on a variety of screens, including a touch-screen kiosk in the lobby of the Health Sciences Library. Like HealthLinks, the MyHealth Toolkit is a mini-portal to external content, so the point is to get users there as quickly as possible without distractions.
Continue reading …
Client
Sam Lai, Lai Real Estate, Ltd.
Details
Sam is a friend of mine who needed a web site for his real estate appraisal business in Seattle. We met several times to discuss style and requirements of the site. In addition to listing his services and rates, Sam wanted an online appraisal request form that would allow customers to submit requests directly from his site.
Continue reading …
Client
Calvary Chapel, Seattle, WA
Details
Calvary Chapel is a Christian church in Seattle, Washington. The old web site was built with static HTML, font tags, and JavaScript rollovers on the navigation images. It desperately needed a design face lift. As a member of the church, I originally volunteered my services to the staff to clean up invalid HTML and help with broken links and content updates. Shortly after work began I sat down with the senior pastor and proposed creating a small team to investigate redesigning the site from the ground up.
Continue reading …
Client
University of Washington
Details
Every so often the librarians at the HSL need to create a longer tutorial that goes beyond the typical How-To page. These tutorials usually end up replacing in-person class visits that have become too cumbersome and for which having permanent content available any time would be beneficial for the students.
Continue reading …
Client
University of Washington
Details
HealthLinks is the portal to the Health Sciences Libraries at UW. (For more information, see my write-up of HealthLinks.) Before the redesign of HealthLinks, the How-To pages didn’t have a consistent look and feel. My boss asked me to design a new template that could accommodate help/how-to pages of various topics and lengths. The template also had to look different from the usual pages on HealthLinks while still showing that it was part of the larger site.
Continue reading …
