I’m working on some updates to the design, as what exists currently was a bit rushed and doesn’t quite accomplish the goals that it should. To make use of the opportunity, this is a good time to add additional features as well—reviews still being the focal point of the site. As Typesites exists by and large from its readers and guest authors I think it’s only appropriate to ask you what type of content you would like to see on there.

So I’ll keep this short and sweet. What do you love about Typesites? What do you dislike? How would you feel about a side-blog that spotlights web typography techniques? How else can the site be improved? The floor is yours…

I ran a few tests on coworkers this morning using the application and was simply blown away by its ease of use and useful features. Within 60 seconds I had my first project setup, my first user profile created and was running a test of Clockwork’s products. The most exciting part came when I ended the first test and exported the Quicktime movie file that was created.

Opening up the movie I was greeted by a full scale representation of my desktop, along with a picture-in-picture view of the user in the lower right hand corner. The application recorded everything that the webcam could see for facial reactions as well as audio from my Macbook Pro’s built in microphone. The screencast of the entire desktop allowed for me to watch what the user was doing as well as reported any clicks with small overlaid circles.

This type of basic user testing functionality built into my laptop and organized neatly in one application simply blew me away. It’s a great substitute for anyone without a dedicated testing lab (which few small scale companies have available), and even if you do have one; it makes for an awesome portable test station, no extra cameras or one way mirrors needed.

I’ll be posting more about my beta experiences in the near future, but it would be suffice to say that Silverback will be a must have application for anyone working on creating websites or interfaces for web applications. Since it allows for full desktop usage I’m sure it would also be super useful for anyone testing desktop applications as well.

For the latest on Silverback, you can follow the Silverback Twitter Account.

Enjoy the screenshots! Click them to view a larger version on Flickr:

New project created

Creating a new test session

Ready to start a session

Session finished

Exporting Video

When you create something along the lines of the Web 2.0 look, or a hand drawn look for example, you are assigning attributes to whatever the content happens to be that may or may not be appropriate. Design communicates a visual message to a viewer, and when you communicate the wrong thing, you are failing your client.

In fact, this type of ‘design’ devalues real design. Just look across the blogosphere, look at the bountiful amount of Web 2.0 style sites for companies which have no qualities that fit the stigma that comes with Web 2.0; it just looks pretty. Look at the dozens of illustrative, organic feeling designs that have popped up recently. Someone told me that super-sized text is a new trend (when the size of type is considered a trend, may the Swiss have mercy on our souls).

To put it in one sentence, I really love Wikipedia’s definition of design:

Designing normally requires a designer to consider the aesthetic, functional, and many other aspects of an object or a process, which usually requires considerable research, thought, modeling, interactive adjustment, and re-design.

Everybody’s Doing It!

No. No, they’re not. Think of the industry rockstars; none of their sites look like each others or any others for that matter. There are many knock-offs but they all pale in comparison to the original design. The reason why the remakes can never ascend to that level of design is because the design is no longer communicating. Each personal site design visually encapsulates the personas of many of these people:

Cameron Moll’s site, Authentic Boredom; Classy, yet personable.

Elliot Jay Stock’s site; Edgy, a little bit of rebellion.

Shaun Inman’s site; Crisp, clean, minty.

None of the above three sites look the same, nor will you find any other prominent designer’s sites mimicking their style. Can you imagine, say, a law firm in Shaun Inman’s design? No. Even though the site is very clean and professional, it has a certain quality to it that is particular to Shaun. This is the core foundation of design, the very thing that separates the designer from bloke who figured out how to save as HTML from Microsoft Word. Creating anything with disregard to emotions, preconceptions, and message is not design.

If the people many of us look up to are coming up with great visual communications which succeed at communicating the proper ideas, shouldn’t we be following suit? If you do believe in trends, maybe the next one should be unique and communicative.

Designing the Obvious

Designing the Obvious was the book that created my passion for user interface design. Many of the principles within the book drive my thoughts about the tandem of simplicity and user experience. As far as application interface design goes, there is no better book for theory. That said, the information in the book is applicable to all facets of interactive design. The title itself, is pretty self-explanatory (obviously!) and the book makes for a good read, rather than being overly technical.

Don’t Make Me Think

A must-have for anyone working with front-end design on the internet, Krug’s book has aged particularly well. The examples are in most cases no longer on the internet, but the principles and ideologies are still very relevant. If you don’t own this book and you do any form of web design, you need to at the very least borrow this from the library; though you’ll probably want a copy as your bible. My copy is getting pretty dirty on the covers.

Analog In, Digital Out

Brendan Dawes is a curious man. Analog In, Digital Out is a book about interaction – sort of. Dawes takes a look at how every day events can be information that can be harnessed to produce designs, and frequently challenges the way we see computers today. The examples in book even include snippets of code to reproduce what he has made. Reading this book opens a new way of abstract thinking. Someone is going to read this one day and create some sort of technological marvel.

Thinking With Type

This book introduced me to the world of typography. Over time I’ve found that nearly any book on typography repeats the history of type for the first half of the book, and while this one is no exception, it presents it in an interesting manner. The examples and explanations are more manageable than The Elements of Typographic Style and I would highly recommend this as a starting point for those interested in learning more about typography.

The offender? A lightning bolt icon indicating the fax number and some poor ordering

The problem is pretty simple, but twofold. First, why a lightning bolt for a fax machine icon? Granted, there’s no hard rule about what to use as a fax icon, but this one is pretty suspicious. What’s worse is the layout of the next sentence. Notice that Fax is under the phone icon, and call is under the confusing fax icon. Mix in a bit of a rush and just glancing at the sheet while it’s in a fax tray and you have a recipe for disaster.

If you look even closer you can see the word Fax again underneath itself, and again under the phone icon.

The problem is easily solved, and one could say that putting the phone number in the far right helps increase it’s prominence due to it’s proximity to the edge of the page. A second benefit is that it reinforces the process they want you to follow: fax first, then call.

My revised order form

While the food was late, it was still tasty. I’ve eaten at Potbelly enough to be a repeat customer, so this wasn’t enough to put me off. But think of all the new customers that may never reach the point of repeat customer if they suffer a similar folly? Just another example of why good design pays off.

The bowl of chili and sandwich, only 60 minutes later than I had hoped!

Anyone else had a similar experience with offline forms? Personally I find it interesting that such mistakes are probably still made in the online world. To be honest, until you’re a victim of such a situation or have someone tell you about it, I’m not sure it’s one of the issues you could catch easily!

Edit: By request I’ve uploaded the full .pdf of the menu for readers. For educational use only!

I absolutely loved reading the post (even though it is from 2006) and decided to push Astheria.com to be a little different from other blogs. Fortunately, this sat pretty well with me since I wanted to pull the articles out of the mess of lesser posts anyway. This makes things a little different on its own but I hope it will drastically improve the findability of what most people are going to care about. There are no longer sections for metadata or categories, and the archives are a bit radical. It’s still a blog, it still has a relatively conservative layout, but it’s a step in the right direction I think.

I have some interesting thoughts regarding the use of human computation and blogs that I didn’t have time to address in depth, and that’s something I’ll be working on behind the scenes for a while. Look for it in the future.

A Work in Progress

For now, I’m still working on tweaking and fixing for different browsers, but I’d love some feedback. It’s going to take a good bit of polish to bring this to the level of the previous design.

The problem for me is with the way things are set up now. I feel compelled to only write articles, and any time that I write something shorter and less important, it pushes the ones that are more important further down the page. So I need to do some reformatting to keep those important articles at the top, while allowing myself the freedom to post more often by not feeling the need to write a full article. The good news is, changing this means I’ll be posting more frequently.

Another issue is the body copy, Palatino doesn’t work well at small sizes, and though most people haven’t complained, I find myself annoyed by it at times lately. The last thing I want to do is be inhibiting the readability of the content; it’s the most important thing! So that will be another focus point for me, as well as making it easier to find and decide upon what content a user wants to read.

Lastly, the markup is a bit ugly, and hardly optimized for SEO, so that’s going to get an upgrade as well.

Self-Inflicted Deadline

By ‘self-inflicted’ I do mean it in the wound sense. Deadlines suck, but they do force a result. A problem most of us face when designing for ourselves are the countless iterations we go through, and before you know it, a redesign becomes a months long project just deciding on a particular look and feel. So I’m setting a deadline for myself, April 14th. This also happens to be the date of MinneWebCon, which I’ll be attending.

Two weeks to go; I’m going to need some Red Bull.

Navigation

Figure 1: New Navigation

Splitting up the navigation is a great improvement over the previous system that was difficult to use for both the new and seasoned user. However, the issue which immediately grabbed my attention was the decision to make design one of the primary tabs, rather than grouping it with those of lesser importance off to the right. I really doubt people go into the current presentation tab in the current Wordpress interface, and the contents of the design tab are the same. Once you have installed your theme there is really no reason to be playing around in there, much the same as a plugin for most users. In contrast, the other three primary tabs are the things people spend nearly all of their time in.

Another item of note is the Visit Site link next to the name of the blog. It’s shape and size is visually commanding when it isn’t all that important. Also, while it may be more of a personal preference, I have never liked the term visit. Especially for my own sites, I prefer the previous verbiage of View site.

I do love the new comment notification in orange, it rightfully grabs your attention so you take care of it. I can not count how many times I’ve failed to take care of that stuff simply because nothing reminded me of it.

Write/Edit Screen

Figure 2: The Write/Edit Screen

The most important screen in the whole application is also one of the most drastically changed. While I love some of the new additions, such as the permalink preview and tag path there are a lot of things here I find questionable.

Much of what used to be in the sidebar moved below the post. Unfortunately, this gives equal precedence to setting a post’s timestamp as it does custom fields. Get those things out of my way so the user can focus on the more frequently used tools.

The new add media tools are excellent, and a great addition, but why can’t the rest of the GUI based editor have the tooltips? While it’s not as important on the more obvious things, from personal experience the more icon has been troublesome, why not use the already developed tooltips from the media bar?

The removal of the Save and Continue Editing button was odd at first, but I’m happy to find that the Save button now has the same functionality (which is more intuitive to a new user). However, I’m still scared of how close the Publish button is to the Save button. It would be nice to have more space between them to help prevent accidental publishing.

Figure 3: Below the post box

Since the categories section moved beneath the post, I now have to click into the categories section to do something that nearly every blogger does prior to posting, assign categories or tags. Thankfully, this is solved with a cookie that remembers which one I like to keep open, but what about using that information to put the one that I use more often above the other if I only keep one open? Less scrolling. My other problem here is that I now need to click Add new category to give me the form to add a new one, this seems to be an extra step that could easily be avoided.

With the reduced amount of options in the right hand column, it would be nice if it were fixed in place and scrolled with the screen, so that when I am quite a ways down the page filling out my custom fields I don’t have to scroll back up just to hit save and make sure things are working as expected.

Manage Screens

Figure 4: The Manage Screen

Making these more consistent is one of the best things for new users, and I really don’t have much to comment on. But I do wonder if removing the low-contrast comment icon in the header row in favor of a text based label wouldn’t be a bad idea. It would be more consistent and solve that contrast issue while being more informative for a new user.

Figure 5: Plugins Screen — Which one is activated?

However, the plugins screen no longer has an easy way to tell if a plugin is activated or deactivated. Consistency is great but this is a hindrance once you have a few plugins installed.

The choice of common settings for permalinks are still poor for both SEO and human use, why not improve these recommendations?

Conclusion

Overall, I think the new interface is a great improvement, but there are many things that leave me wondering if it’s had enough polish yet. I am sure the folks at both Wordpress and Happy Cog will make the final release a great experience, and I am excited that they are having a period for feedback prior to that release. How do you folks feel about the new interface?

Designed By Anderson

Up first we have shining example of excellent navigation. None. Anderson’s single page portfolio is great at making an initial visual impact, being concise about background and contact information, and even offers up PDF of his curriculum vitae.

Figure 1: Clean. Usable. The work speaks for itself.

The only problem with this site is that it still has some lightboxed thumbnails. However, the logos are plenty big even in thumbnail form to be visually appropriate. I would perhaps simply link the website thumbnails to their respective sites rather than launch huge lightbox images that take over my screen. Even still, the fault is rather minimal in comparison to how well the rest of the portfolio works.

Sofa

While not a personal portfolio, but a business one, Sofa does a great job of saying their piece and getting out of the way. They create software applications, and the three items of most visual interest on the page are the icons for each application. Each links to its respective website.

Figure 2: Here’s who we are, here’s what we’ve made. Any questions?

My problems here are mainly aesthetic, the badge in the upper left is insanely distracting because the heart contains more red than anything on the page and the contrast makes it hard to pull my eye away from. The other being the size of the header graphic. Sofas, I know, I get the reference, but that’s not why I’m visiting your site.

Feed the Creature

Invisible Creature is a firm that does some great illustrative work, just check out the posters on their site. While they may use thumbnails, they are plenty large enough that you can get a sense of detail prior to taking a closer look. Unfortunately, that closer look isn’t quite as close as I’d like to see, given that people would simply print them off rather than purchasing a poster it’s an understandable compromise.

Figure 3: Thumbnails? Yes. Appropriate size? Yes.

The real issue here is the horizontal scrolling, while it remains intuitive here, I really want to be able to use my scroll wheel rather than having to click and drag on my browser’s scroll bar. But for some reason I can overlook this shortcoming because of how awesome their work is. I wouldn’t have been able to make that judgement if it weren’t for decent size thumbnails.

Sreski

Mark Dormand’s Sreski is a prime example of how to abolish the need for annoying thumbnails — at least on the home page. Unfortunately, upon navigating into ‘my work,’ I was treated to the same old cropped thumbnails, moderately sized, but not large enough to be representative of the work.

Figure 4: Why must you change on internal pages when you’ve hit it out of the park on the home page?

Clicking on one restores the enjoyment of large images with a left hand navigation, but why the thumbnails at all? This is an example of where the portfolio could use some trimming to just his best work. There are a few items that seem to be under his current abilities, and people remember you for your best and worst work. Removing these would reduce the number of pages making the textual navigation acceptable since there would be a slimmer amount of pages to click through, and the my work section’s home page could make better use of screen real estate and use some larger images.

Proud Creative

Last, but not least, Proud Creative. They’re damn proud of their work, how do I know? Because the rest of the portfolio is as minimal as possible. The fixed position left column is great for keeping contact and other information in view while browsing the portfolio.

Figure 5: Who put the sun on a website?

Not much to complain about here, just get rid of that blinding yellow circle that keeps distracting me from all the awesome work.

Conclusion

It certainly didn’t help that Smashing Magazine’s article stole a few of my favorite portfolio sites, and rather than retread old ground I’ve done my best to illustrate what I feel is solid portfolio design direction. Agree? Disagree? Make your opinion known.

Given the anonymity, some people decided it would be a great time to use other peoples accounts to tweet some rather obscene things. I’m sure they chuckled. But the problem here is that those comments are tied to the identities and reputations of those people. Even worse, there are many people using Twitter as a piece in the puzzle of a more complex thing. For example, I use Twitter to run the asides section in my footer, a bit of a look into what I’m doing at a given moment.

Now, perhaps a potential freelance job was browsing my blog and began reading some of the things other people were tweeting and weren’t particularly savvy enough to understand the situation. I don’t think I need to explain that further.

To further complicate things, these people who are using Twitter for other applications and aren’t particularly tech savvy will have some trouble on their hands come tomorrow. Because of the way the Twitter plugin I use functions, for example, it keeps a record of my tweets in a table in the MySQL database. While I did regain control of my Twitter account and was able to delete the offensive tweets there, they were still stored in my database here.

Granted, I have enough knowledge to delete them from the database as well, but what about all the other people out there who haven’t the faintest clue? Those people make up the vast majority of a Twitter’s userbase, not people savvy enough to do all the necessary cleanup.

Just another example of why trusting data to third parties can be ugly. Anyone else effected by the anarchy tonight?