How to Build a Modern User Interface For Intranets and Sites

I’ve spent most of my career working for Ad agencies learning everything about customer service, design and ideas. In fact, I would say this is pretty much what we would be expected to deliver every time:

1. Great ideas
2. Excellent service
3. Impeccable design

To me, a technology services company must do exactly the same thing. In fact, to take it one step further, the software that we build has to continually provide you with these principles long after you lock the door behind us!  And so, you ask, how do we go about doing that?   “Call us and find out?” Ha!..or keep reading!

Listen, Watch and Ask the Right Questions: We start with the business problem. The business problem will usually reveal the type of information that you work with, and more importantly how you work with it.  Everything from how people get the data, how they work with it, who needs it and when, and where it ends up after everyone is done with it. This applies to oil and gas wells, documents, workflows, or even corporate performance dashboards. I mean, every little thing we do is about accessing, manipulating and pushing information back into the system.

Mock it Up: Now that you have the whole picture, it is time to design a system that makes sense. I am not even going to mention technology or design principles here, because I expect that a decent architect, visual UX expert and a visual designer bring their best to the table. However, since this little article is about design, I am going to give you some tips:

a. Build a UI to solve the simplest business problem first: When you are dealing with a lot of complex business processes and flows, things can easily start to look like an airplane cockpit. Gross. Take a page out of Staples: users and I want/expect ONE button, called “Easy”. So make the interface easy to use and make it solve one problem.

b. Add more functionality in an iterative fashion: Who ever thought Agile applied to design as well!? Well it does. Keep creating layers and adding more and more functions. Sometimes it even makes sense to solve the second problem in a separate flow and then slowly merge it in with the first one. Now I know, this takes time, and billable hours fly by quick. This is why I recommend to solve the problem in the simplest terms and make the other flows “fit” your original design.

c. Hide the complexity until it is required. I said easy right? OK, good.  Remember back in 1995 when Microsoft Word had like 60 buttons on the screen? Look at it now, even Microsoft realized the stuff was too daunting. One of the most impeccable modern designs I have seen in recent years for a development IDE is MonoDevelop (the screenshots are of version 3. Check out version 4 and 5 and see the huge difference) Genius!

Modern design involves clean lines, no clutter, big bold buttons, vivid colors and a huge emphasis on the main controls. Check out the interior of the Mercedes Benz S-Class vs. something like an Acura or even a BMW. The Benz has a beautifully designed, uncluttered interior where I don’t feel like I poke my head into a Christmas tree! Remember, one button! Now, when the user clicks that button, only the most required buttons appeared. Not disabled buttons, or buttons that, when clicked, give you an error message, just the ones they need to go to the next step.

d.  Let the user drive: It is actually extremely challenging to design interfaces that are simple and empower the user, learn with him or her, and offer complexity only when required. A lot of the time, the simple interfaces force the user to repeat a process over and over, which creates frustration. Or worse yet, the simple UIs also make decisions for the user. Big no no. Make sure to always give the user enough power to take the process down a different track if required.

Build it in Pieces and Involve the Customer: I recommend an iterative approach around the development and involve the customer as much as possible at every stage gate. Avoid the big 1986 black cloth style reveal. Not cool. Work with the customer to evolve the idea at every stage and then tell them it’s their idea and their product — which will actually be true. Watch the relationship blossom too.

User Test It: Finally, let the users pick at it. You will be amazed what happens with your original flows. They will morph and change and grow and shrink to fit exactly what the users need. Oh yeah, note to self: At this stage, check your design and UX ego at the door.

So, you want some good tips, right? All this process but no actual real information to take away to Photoshop. OK..ok. Here is my take on where things are going:

Big FMAs (scrollers with headlines and videos), and little studded WebParts on the home page are nearly done with. This was popular for the last 5 years and it’s slowly giving way to application/desktop style web properties that look more and more like the Android interface than a “webpage”. HTML5 really helps here.

Data visualization is the next big thing! That is, say you are working with a workflow to submit a request form. You could just offer the good old data grid style “fill out your expenses here.”  Again, this approach was cool in the 1990s and somehow even still survived until recently. Nowadays you will present the user with an infographic of what the whole process looks like, with a little blue glowing “Start here” sign, then you offer a neatly spaced out form, wizard style. Then when they submit it, back to the infographic workflow, but now with an indicator around the second step, saying “Awaiting approval.”

Mobility is now standard. Your question should be, “What device don’t you care about” rather than “Should it work on the phone”. Here is another little tip: design it for the tablet first, then extrude the the design to fit the PC and the phone. Trust me, much easier than any other approach.

IE8/9 is almost dead. That’s right, it’s really a question of months before you can dump HTML4 entirely and then its a whole new ballgame, literally. Watch HTML5 make it rain!

Hypercard Revived? Well, perhaps. Before there was Word, and before there was HTML and even before there was an Internet, our favorite innovator Apple came up with the coolest technology ever that gave birth to WYSIWYG.  Never heard of it? Read.  Now take this concept and apply aspects of it to the tools that you build for your customer.   Oh yeah, can you think of a tool that lets you do this today? Nope! Yeah, there is a huge gap/market opportunity for a company who builds a quasi programming/design tool for business that is simple enough for non-developers to use.

There. I hope you found my little scattered article interesting!