Archive for Killer Web Design

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.

Tagged with: ,

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

Yahoo! UI Library

Yahoo is working hard to win hearts of the Web 2.0 world. They recently released two new products to their Developer Network.The first service is the Yahoo UI Library. Many of the innovations of the Web 2.0 are powered by JavaScript. Anyone that has tried to develop a dynamic site using JavaScript will experience many frustrations as they try to make their scripts work cross-platform. It appears that Yahoo understands our pains, and has released a bunch of really cool JavaScript libraries to assist us in creating cool new Web 2.0 technologies.The second service is a Design Patterns guide for developers. Coming up with the architecture for a new website can be difficult at times, especially when you are dealing with new functionality that you have never before implemented. Yahoo has gathered design patterns to assist us in creating web elements such as Breadcrumbs, Auto-Complete text fields, Drag and Drop page elements, Page Tabs, and Object Pagination. I believe his will be a great resource for all Web 2.0 companies.

Thanks Yahoo!

Read more at developer.yahoo.net/yui…