Category Archives: Killer Web Design

Don’t Make Me Think

Outside of my job at FamilySearch.org, I have my fair share of web development work that I do on the side. An area that I’ve always struggled, especially when the concepts of the new site are entirely original, is user interface design.

I recently discovered a new Stack Exchange community built around User Interface design. I found a discussion thread about which books the community’s designers recommend to developers. The answer that by far had the most votes was Don’t Make Me Think.

I decided that I had to read this book. I bought the Kindle version of the book and read it on my Droid Incredible. This worked well, except there is no way to zoom in on the pictures, so it was a bit hard to get everything I needed to out of the tiny pictures on a small screen.

Don’t Make Me Think defines some simple design principles and why they are important. It teaches the Why, What, and How behind making good UI choices. I can now look at sites like Amazon.com and clearly see where they are following good UI principles, and then I look at some of my stuff, and think “Woah, I really missed the boat here.” Most of my stuff isn’t that bad though. I was surprised at how many of these things I have done right already. I now feel like I have a rulebook that I can go to when making tough design decisions.

Some of the principles I like most from the book include:

  • The Homepage needs to explain the purpose of the site.
  • Page hierarchy is important to make the sections of your site easily identifiable.
  • Page titles are needed on every single page.
  • Users muddle through sites and don’t necessarily learn how to use them properly. As an example, there is an astounding number of people that use Google and Yahoo! as their browser’s address bar. It isn’t the proper way to use it, but they manage to get to the sites they are looking for.
  • Clickable things should clearly appear to be clickable.
  • Your search bar should actually use the word “Search”
  • Usability testing with 1 user early on in the project is more important than testing 30 towards the end.

There are many more concepts that I don’t have time to write here, but if you do anything with web development or design, this book is really helpful.

Creating Software for End-Users

I just read this on Max M’s blog as I’ve been researching how to migrate a Plone 2.5 site to Plone 3. I thought this was way too good not to share.

“There is one thing I have learned through the years. Users do not do what they should. They do what they can. And if they can upload a 12 MB bmp image, they will. So I expect this to be a normal use case on many sites.”

This statement really supports the need for data validation and good UI design.

Finally done with school

Today was my final day of graduation ceremonies. I’ve finally completed six years of college and now have both a  BSIS  (Bachelor of Science, Information Systems) and a MISM (Master of Information Systems Management) degree from BYU’s Marriott School of Management.

So what are my plans from here on out? A partner, Brian Corrales, and I have started a business named Apriux. It comes from the Latin root prius which means “ahead of” or “leading.” We will be offering web consulting services including design, development (php and ruby), analytics analysis, and Internet marketing services. We are connected with some of the best design and development professionals in the industry and we are going to have a really exciting first year.

We are currently working with some really good clients and will be helping them to launch their products in the coming months.

If you know anybody that is looking to either establish or grow their presence on the web, please let me know. We’ll gladly work them in as soon as our availability opens back up.

We are also looking for more talented developers to join the team.

Executable Conceptual Models

On Wednesday, we began to dive into executable conceptual models in our Information Architecture class with Dr. Liddle. An executable conceptual model is basically the concept of automatically generating working code from a model created with UML.

When designing complex enterprise systems, there are often times multiple hundreds to thousands of tables that store all of the application data. Modeling this data is perhaps the most important aspect of building a good information system. So, the pain that the executable conceptual model solves is having to translate the monstrosity of a data model into executing code by hand.

Is this even possible? Or is this just pie in the sky? Dr. Liddle is on the scientific board for the OlivaNova project. OlivaNova can take a conceptual model, and compile it down into working .NET code. He says it isn’t elegant, but it does function well. Oscar Pastor, Juan Carlos Molina and Emilio Iborra wrote an article “Automated Production of Fully Functional Applications with OlivaNova Model Execution” by Oscar Pastor, Juan Carlos Molina and Emilio Iborra.

The doubt that I have about these executable conceptual models is their effectiveness to produce good user interfaces. Technology is only half of what makes up a successful Information System implementation. An information system is only as good as it maps or improves business processes. In change and project management, it is critical that those who are most affected by the new system are able to give their input on what will and won’t work.

Designing a system from the user interface has proven to be an effective process in software development. It allows changes to the application to be made while changes are still cheap. A change in design is a lot easier to do when it is still on paper. It is still relatively cheap when the change needs to be made to an electronic prototype. Changes become very expensive when the change needs to be made to fully programmed systems.

Designing from an interface also helps system designers to discover the real model that needs to be implemented behind the scenes. There will be less, “Oh, we need to be able to tie x to y and keep track of z, d, and q” remarks after the system is delivered. This is where I think the weakness of the executable conceptual models lie.

Ruby on Rails, and its imitators, have wowed developers around the world by its ability to automatically generate working code and a user interface from a data model. This auto generation of user interfaces is called scaffolding. This has proven to be very nice in kicking finished products out the door quickly, but is doing this taking a backwards approach?

Jamis Buck, one of the core developers on the Rails project, and renowned programmer on the 37 Signals team says the following about scaffoldings’ place in web development:

“Specifically, the issue I have with scaffolding is this: it puts the emphasis on the application’s model, instead of the user interface. It assumes that you know the domain of the application before you know how the user is going to interact with it. It assumes that the user interface can successfully follow your conjured domain. It assumes, frankly, far too much.” –Jamis Buck

I believe that with a small and simple data model, scaffolding does make sense, and it can save a lot of time. But, when an application begins to reach any level of complexity, the design must go way beyond scaffolding and actually be molded to a user’s specifications.

The Ultimate Guide to Web Success

The small team at 37signals has created some of the most innovative, clean, and useful products on the web. Their development philosophy has turned them into one of the marvels of the 2nd web movement (I know I’ll get beaten if I say “web 2.0″).

If you haven’t read 37signals’ book titled Getting Real yet, you should start reading it today. Get it free on the web, and listen to the Business Jive interview with Jason Fried, President of 37signals.

I have had intentions to read the book for a long time, but I have a hard time getting around to buying books. I discovered the online version just yesterday, and I just read about a third of the book tonight.

Every essay that I’ve read so far has given me important insights that will help me become a more effective project manager and software engineer. Now I plan to implement each principle and write about the successes gained by doing so.

Happy reading. Honestly, this book is the best thing I’ve read in a long time.

IE7 and IE6 on Same Machine

I’ve been hesitant to upgrade to Internet Explorer 7 because according to analytics data on several of my sites, the majority of Internet Explorer users are still on IE6. My wait is now over. I can finally run my automatic update to install Internet Explorer 7 because Microsoft has released a Virtual PC hard drive image for testing web applications in Internet Explorer 6.

This is great news for web developers and web designers, because IE7 has changed the way it interprets CSS. While I have yet to do much extensive testing of CSS in IE7, I have heard from several designers that the CSS implementation in Internet Explorer 7 is a lot nicer to work with and that it is more standards compliant.

Web surfers are now split between 3 browsers: Internet Explorer 6, Internet Explorer 7, and Firefox. Web designers can now test their sites in all 3 browsers by using Microsoft’s Virtual PC. Read more about this on the Microsoft IEBLog.

Browser Distribution from my Google Analytics:

Browser distribution

Internet Explorer Distribution:

Internet Explorer distribution

Using Lightbox JavaScript

Lightbox is a really cool JavaScript library that is used to view images in their full size and glory. Using Lightbox JavaScript is really easy too, as all you have to do is add about 4 lines of code, and an additional rel property in your anchor tags. Visit their site to see how to do it.

I recently used Lightbox for a redesign of my dad’s pianos website utahpianos.com. On his site, he has an image gallery of his pianos, as well as a list of pianos that he has for sale. The old site used to use ugly pop-up windows or just take you to the full image. The usability of the site has been greatly improved by this simple script.

Lightbox image zoom used on UtahPianos.com