Designing User Interfaces For Business Web Applications

Advertisement

Business Web application design is too often neglected. I see a lot of applications that don’t meet the needs of either businesses or users and thus contribute to a loss of profit and poor user experience. It even happens that designers are not involved in the process of creating applications at all, putting all of the responsibility on the shoulders of developers.

This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects.

So, we will cover the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications.

Websites vs. Web Applications

Confusing Web applications and websites is easy, as is confusing user interface design and website design. But they are different both in essence and in so many other ways, which we’ll explore in this article.

A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. except for the contact form and search functionality). The primary role of a website is to inform. Some websites use content management systems to render dynamic content, but their nature is still informational.

Website vs. web application
CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work.

Web applications, on the other hand, are dynamic, interactive systems that help businesses perform business critical tasks and that increase and measure their productivity. Thus, the primary role of a Web application is to perform a function that serves the user’s tasks and according to defined business rules.

Web applications require a higher level of involvement and knowledge of the system on the part of the user. They don’t just stumble upon the application, do their work and bounce off. They use it as a tool to perform critical business tasks in their daily work. In the end, they cannot easily discontinue using the application and switch to another if they don’t like how it’s working, as is the case with websites.

Different Types of Web Applications

Business applications range in type from invoicing for freelancers to content management systems to document management systems to banking and financial systems.

We can distinguish between open and closed applications. Open systems are online applications that are easily accessible to anyone who opens an account. Users can access such applications via the Web and can open an account for free or by paying a fee. Closed systems (or line-of-business applications) are usually not accessible outside the company that uses it, and they can be considered “offline” applications (though many systems expose their functionality to business partners via either services or specialized interfaces). Such systems usually run on the company’s local network and are available only to employees.

I don’t know who coined it, but one term I like especially is weblication, which describes what a Web application is in general. This doesn’t mean, though that a Web application is a half-website half-application hybrid. It is far more complex that that.

First, Know Your Users

You’ve probably heard this a thousand times, and for good reason. A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience. As Steve Krug said, “Developers like complexity; they enjoy discovering how something works.”

users

When identifying your users, keep in mind that clients are not users, and you are not a user. Although a client’s management team will usually be interested in the project and try to influence decisions, remember that they won’t be sitting in front of the computer several hours a day (unless the application is specifically for them).

How to Identify Users?

Identifying users can be done using several techniques, such as user interviews, business stakeholder interviews and the “shadowing” method of observation. Interviews can give you answers to questions about the users’ knowledge of the system and computers in general, while shadowing can yield more detailed information about how users perform tasks and what errors they make. The method is called shadowing because the observer is like a shadow, watching and noting the steps a user takes.

If you don’t have access to real users—either because you don’t have permission or are designing for open application—you can use personas, a tool to help identify users. Personas are a representation of real users, including their habits, goals and motivation. Because certain information about users is often identified through business analysis, you can make use of it to create personas. If you are not familiar with the tool, a comic by Brad Colbow will help.

personas

Task analysis helps identify what tasks users perform in their jobs, how they do them, how long they take and what errors they make. Sometimes clients will be using an old version of the application that you are designing to replace. Make use of that old system and watch how users use it. Understanding their tasks and challenges will be easier that way.

Regardless of who your users are, one thing is certain: in most cases, you will have to consider both novices and experts. Novice users should be enabled to learn as fast as possible, while expert users should be enabled to perform their tasks extremely efficiently. This may mean creating separate interfaces. But in many cases you will be able to accommodate both types of users in the same interface through various techniques, such as progressive disclosure.

Such research is usually done by business analysts. But if no one else is responsible for it, you should do it. Once you have the necessary information, you can begin with design.

Design Process

You can follow one of any number of processes in designing the user interface. You might already have one. However, I would suggest that you consider the Agile approach. Why, you ask? Well, because for users (and clients), the user interface is the product. The bottom line is that they don’t care about your sketches or about fantastic back ends or powerful servers. All they want to see is the user interface.

So, how does Agile help? It helps through its key principle: the iterative approach. Each iteration consists of all of the phases defined by your process. This means that at the end of the first iteration, you will have a product that can be tested, a prototype.

Process

Sketching

Sketching is a powerful way to explore ideas. The goal is to arrive at the solution by sketching out different concepts. Most sketches will be thrown out, but that is okay. As Bill Buxton says in his “Sketching User Experience” book, sketches are fast to create and easy to dispose of, which is why they are so powerful.

Are sketches the same as wireframes? Well, the differences can be blurry, but I would say no. Wireframes don’t capture rough ideas but rather develop them. Read a fantastic discussion on IxDA: Sketching Before the Wireframes.

Once you get the “right” sketches, or at least the ones that you think are right, you can create more detailed wireframes or go straight to creating interactive prototypes.

sketch
Sketch by Jason Robb.

Interesting reading on sketching and wireframing:

Prototyping

The next step in the process is to create prototypes that will simulate the real application. A prototype can contain one or more features (or all of them), but it actually does nothing. It merely simulates the behavior of a real application, and users will feel that they are actually doing something. Prototypes may contain some functionality if needed (such as complex calculations).

Because the nature of a prototype done in HTML is temporary—its purpose, after all, is to test ideas—don’t bother with the code; just make it work with minimal bugs. You will throw it away anyway. You can also use specialized prototyping software such as Axure. Some people even prototype in PowerPoint.

prototype
An Axure interactive prototype for an e-commerce website, by e-maujean.

Further reading and tools for prototyping:

Testing

Prototypes are useless unless you test them. This is not rocket science. People like Jakob Nielsen and Steve Krug support so-called “discount usability testing,” which is cheap and fast and yields valuable insight into your design decisions. You will use this information as the basis of another iteration of sketching, prototyping and testing. Do this at least until major issues have been fixed. We all know that software projects are tight on time and budget, so to be more efficient, test early and test often.

One of the best resources for discount usability testing is a new book by Steve Krug, “Rocket Surgery Made Easy.” Pick up a copy and read it.

usability_test
Snapshot of usability testing for Delicious, by (nz)dave.

Further reading:

Design Principles

There are many design principles, but there doesn’t seem to be a general consensus on definitive ones. So, we’ll go through design principles more informally, leaving out strict definitions.

No One Likes Surprises

Probably the key factors in a good UI are consistency and familiarity. A user interface should be consistent across all parts of the application, from navigation to color to terminology. This is known as internal consistency. But a user interface should also be consistent within its context, such as the operating system or other applications in its group or family. A typical example is the applications in the Microsoft Office family. This is called external consistency.

A good approach to consistency is to define user interface guidelines for each project or for a group of projects. These should guide the decisions you make for all of the details. This will not only maintain consistency but also serve as documentation to help team members better understand your decisions.

sprinkle_penny
Although a simple example, SprinklePenny achieves consistency and familiarity across the application.

Consistent user interfaces have a shorter learning curve, because users will recognize parts of the system and be able to fall back on prior experience. But familiarity is sometimes confused with consistency. Familiar user interfaces draw on concepts from the users’ previous experiences and use appropriate metaphors. Folders, for example, are a well-known metaphor for file organization, and they have replaced “directories,” which were used previously in command-line operating systems. In short, speak the language of your users.

A common belief among business owners is that a great user interface should look like a Microsoft Office product, especially Outlook. I won’t go into explaining how pointless this is. Rather, I will offer alternative advice: defend the user-centric approach, and explain why creating an application for employees, clients and partners (i.e. their users) is so important.

All the same, most businesses are unique, as are their work processes. For example, two businesses from the same branch could have significantly different processes, forcing you to go beyond what is familiar and start to innovate. This part of the design process can be very interesting, although you have to be careful in how far you go with innovation.

Further reading:

Users Should Be Able to Be Efficient

Without a doubt, users should be able to be efficient when using business applications. This is what they are paid for, and this is what managers expects from the application. User interfaces should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. But this is not always the case. There is an opinion, or at least practice, among developers that says the user interface should be as complex as the back end system. No matter how ridiculous this sounds, the problem is real and might give you a headache. This is one reason why good communication and collaboration between developers is a must.

Users are efficient when they focus on a particular task. As mentioned, task analysis can help you identify tasks and determine how users perform them. If tasks are long, accelerate them by breaking them up into smaller units. You can also increase efficiency by providing keyboard support and shortcuts. Think how inefficient it is for a user to have to switch back and forth between mouse and keyboard. In some cases, you will be designing for users who are accustomed to working on command-line operating systems and the applications made for them. They will be keen to have keyboard support. One suggestion: when defining keyboard shortcuts, keep them consistent with those of common applications. For example, Ctrl + S should always be save, and so on.

google_docs
Google Docs Spreadsheet enables users to be efficient by providing keyboard shortcuts and context menus, as well as by taking advantage of users’ familiarity with common desktop applications.

Efficiency can also be enhanced through personalization. Users who can personalize an environment will learn it faster and, more importantly, will be more confident using it. Personalization can be done in many ways: choosing widgets for the dashboard; defining shortcut options and favorites; changing the order of elements; etc.

Pay attention to accessibility. Although many assume that accessibility doesn’t matter in Web applications, it certainly does. Treat the application as if it were a public website.

A Web application also has to be efficient in the speed with which it processes information. So, consider heavy interactions that result from partial renderings and AJAX requests.

Help!

An interface should provide meaningful feedback that describes the state of the system to users. If an error occurs, users should be notified and informed of ways to recover. If an operation is in progress, users should be notified about the progress.

We can go even further and declare that user interfaces should prevent users from making errors. This principle, called forgiveness, can be followed with confirmation dialogs, undo options, forgiving formats and more. Forgiveness makes it safe to explore the interface, decreases the learning curve and increases overall satisfaction.

Because of the complexity of business Web applications, you would also need to provide a comprehensive help system. This can be done with inline help, a support database, a knowledge base and guided tours (which mix video, images and text).

Further reading:

Can’t Get No Satisfaction

Satisfaction is a subjective term that refers to how pleasant an interface is to use. Every design principle we have described here affects  satisfaction. And a few more principles are worth mentioning here.

Simplicity is a basic principle of UI design. The simpler a user interface, the easier it is to use. But keeping user interfaces for business applications simple is a challenge because the apps often have a lot of functionality. The key is to balance functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. finding the simplest way to solve a problem.

buildwithme
BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.

Aesthetics, though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art. One of the best articles that explains aesthetics is In Defense of Eye Candy.

In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.

Further reading:

Other resources related to UI design:

Essential Components Of Web Applications

Every Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.

Web Forms

Forms in general are important to Web applications. But as Luke Wroblewski says in his Web Form Design book, “No one likes filing in forms.” That includes sign-up forms, including business applications with dozens of fields.

Minimize the frustration of filling in forms. Provide inline validation and good feedback. Use defaults when possible. Don’t forget about novice users. Use wizards to help them complete tasks faster, or use progressive disclosure to hide advanced (or infrequently used) features.

Master-Detail Views

This is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.

Dashboards

Many Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application.

xero
Xero shows a user’s most important financial information (e.g. bank accounts and credit cards) in its dashboard, making it easy for users to quickly see the status of their financial data.

Heavy Use of Tables

Because Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.

Tables can also be interactive, meaning they can generate additional info and even modify the data they contain.

pulseapp
PulseApp is a good example of how tables can be used to efficiently present and manipulate complex data.

Reports

Most businesses work with some kind of reports. Printed reports are usually required, so pay attention to the design of reports. Printed (or exported) reports are usually simplified versions of online reports, optimized for monochrome printers.

fresh_books
FreshBooks has printing, PDF exporting and “Send to email” features. It also shows a print preview.

Don’t Forget UI Design Patterns

We’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it.

Standard screen patterns
This screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen patterns.

Further reading:

Case Study: Online Banking Application

To take an example from the real world, I will briefly explain the process of designing the user interface for one small bank’s online banking system. The team I worked with was hired to improve the system. The main reason for the redesign was that, according to management, “users complained and many stopped using it.”

After only a couple of hours spent with actual users, the main problems were uncovered. Information about accounts and credit cards was buried in poor navigation. Understanding how much money users were spending and the state of their accounts and credit cards was also hard. The application, however, was obvious to bank employees; they were familiar with the terminology and could interpreted the numbers in the application perfectly well.

Give the tight deadlines, we followed the process I have described, and we partially succeeded. Despite the short time, the major problems were so obvious that we clearly understood our main task and how to go about it. We created a dashboard that provided clear information on the state of all accounts and credit cards. With this new navigation, finding information became easier. Reports were easier to understand, and several new features were implemented.

Although we made only a few changes, the changes affected critical user tasks and resulted in significant improvements to the overall experience.

Final Thoughts

Designing user interfaces for business Web applications is a challenging job that is full of compromises. You have to make compromises between client and user needs; business requirements and users; novice and expert users; functionality and simplicity. It requires a solid understanding of users and their tasks, as well as of UI design principles and patterns. Despite the difficulties, the job is interesting, and you learn many new things on each project that influence the way you design websites.

While this article reflects some well-known concepts and things I have learned from designing business applications over the years, I look forward to hearing your experiences and stories.

(al)

↑ Back to top

Janko Jovanovic is user interface designer, software engineer, blogger, speaker and artist. In his free time, he writes about user interfaces on his blog JankoAtWarpSpeed and tweets regularly on Twitter.

  1. 1

    Nice and informative, Thank you!

    1
  2. 3

    Amazing article. I’m building a mini-cms and I’m facing this exact problems you described here – making your interface untuitive and user friendly is the clue to make people wanna use it.

    3
  3. 6

    Very interesting!
    Thanks for this resource.

    1
  4. 7

    Very useful article, thank you !

    1
  5. 8

    Excellently put! This is priceless, cheers.

    0
  6. 9

    Great way to look at differences between web pages & web applications!

    1
  7. 10

    Thank you smashingmagazine, I can be enriched everytime.

    1
  8. 11

    Great article. Thanks for including my screen patterns. I have a 2010 update of the 12 Standard Screen Patterns at: http://bit.ly/97GpNB

    For the early design strategy phase, I have been using my LiveScribe pen and spiral for the sketching. It is a good way to work remotely with clients, since the sketches are digital. And I use Jakub Linowski’s Interactive Sketching Notation, http://bit.ly/18BD1Y, to help convey common interactions like slide, zoom, reveal…

    5
    • 12

      Hi Theresa, thank you for the update and thanks for great screen patterns :) LiveScribe looks fantastic, thanks for the recommendation!

      1
  9. 13

    Great article, thx.

    1
  10. 14

    Great article! The links and additional resources are fantastic.

    1
  11. 15

    I’m just about to make a start on designing my companies intranet, so this is a perfect article for me – thanks!

    1
  12. 16

    Great article! Business users are indeed too often neglected. The usage of the Agile Platform embedded change technology (http://www.youtube.com/watch?v=sOndQpW2YkY) makes it easier to collect feedback from business users.

    1
  13. 17

    Great read :)

    1
  14. 18

    Nice article, very interesting.

    2
  15. 19

    nice and helpful!

    1
  16. 20

    nice and helpful!

    1
  17. 22

    Very Useful.
    Thanks

    1
  18. 23

    This is a fantastic overview Janko – thanks so much for putting it together.
    One of the best I’ve read on Smashing…

    1
  19. 24

    Great article. I would have loved something like this a year ago when I was working on two separate business website apps. This will definitely come in handy in the future. Good work!

    1
  20. 25

    Informative and useful, thanks!

    1
  21. 26

    useful article but… please! stop using those silly acronyms: weblication… or we could use too “weberface” (web+ interface), “usexperience” (user experience) “intersign” (interface design) and so on!

    1
  22. 27

    Handy and useful.

    BTW your ‘Leave a Comment’ area has something funny.
    Here it says “Make sure you enter the * required(in green) information where indicated” rather I think it should say ‘Make sure you filled all the fields’. It would be less confusing.

    1
  23. 28

    Nice article but doesn’t mention any type of development process framework e.g. RUP who can help you to manage the project. We use a blend of RUP and Agil (depends on the size of the project). What are others using for Web projects?

    1
  24. 31

    I just finished a property management online application http://www.inmofolio.com and your article will help me improve future versions.
    Thank you.

    1
  25. 32

    Usability is one the main factors while we are designing our UIs.
    The second most important factor is the Mobile device consideration.

    1
  26. 33

    Wonderful Article.
    Thanks :-)

    1
  27. 34

    An excellent reference article! Thank you!

    1
  28. 35

    I’m taking a class over HCI, will definately share.
    Thanks!

    1
  29. 36

    Enjoyed reading very much and like the links you provided. Definitely useful for my incoming project! THX!

    1
  30. 37

    Great article. Currently working on a rather involved Financial/Banking application for my University, so these are some good tips.

    1
  31. 38

    Nice article. It covers lots of factors very nicely. At my work, we are making lots of interfaces for business applications with lots of data, graphs etc in them. And I’m really getting tired of looking at tables :) They are needed (as you wrote), but sometimes interfaces can consist of two or three pages with just tables…

    1
  32. 40

    This is a great article which cover pretty much all the basic yet critical items and process about web app design. Very informative!

    1
  33. 41

    Good article. You mistyped the BuildItWith.me website.

    1
  34. 42

    I really appreciate this post, I am a web designer working in a company with heavy web applications and I am trying to get in the wave hehe

    1
  35. 43

    I have to completely disagree with the statement “No one likes surprises”

    With Interaction design, this could not be further from the truth; look at: http://www.digitlondon.com/downloads/about/feed.pdf

    A great white paper on the subject of interaction design, citing Surprise as one of the 6 principles of great interaction design.

    -Alex

    1
    • 44

      Alexander, maybe the heading isn’t precise enough and that is my mistake if so. “No One Likes Surprises” here refers to consistency and familiarity, but I do mention innovation in this context as “surprising factor”.

      2
  36. 45

    Kartlos Tchavelachvili

    February 25, 2010 2:28 pm

    boring but useful article :)

    1
  37. 46

    This article came at the best possible time. I’m just about to start a larger project and this is a big help to me, thanks!

    1
  38. 47

    With saas getting more and more popular, it’s nice to see some articles focusing on web apps. I really enjoyed reading through this.

    An interesting approach for a lot of web apps would be to use a javascript library like extjs, which comes with customisable components for data grids, charts, form elements etc and would cover a lot of the essential components that you’ve mention above. It provides more of a desktop look and feel, compared to the sites shown above, but it’s a great framework.

    0
  39. 48

    Another great article Janko.. Thank you

    1
  40. 49

    Helge-Kristoffer Wang

    February 25, 2010 4:39 pm

    Thanks! I enjoyed reading this article!

    Simplicity is vital!

    1
  41. 50

    Good article.!!!

    1
  42. 51

    Excellent article on designing (web) interfaces for business applications. As a developer who started during the time of Clipper and DBase, GUI design was never my strong point. This article creates a very good overview of the requirements of good design practices and good links to more detailed information. While I appreciate the general web design articles posted here, I would definitely like to see more of them on web applications. This may be asking for a little much but perhaps a couple of follow up articles with case studies.

    4
  43. 52

    Janko, incredibly pieced together and informative. Great job. I loved your language in advising the reader to consider design patterns. I think it’s tempting for designers to use UI patterns as template design solutions rather than to inspire facilitating design solutions based around our client’s challenges. It’s quite possible a thirteenth screen pattern is out there waiting to be discovered.

    0
  44. 53

    BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.
    Should be BuildItWith.me has ……

    1
  45. 54

    Carlos Gustavo Xavier

    February 25, 2010 6:20 pm

    Fantastic post.

    0
  46. 55

    Hey, thank you so much for writing this.
    Finally… an article that focuses on the application and not on purely aesthetic wow-looking sites. Glad to see the examples too, not the usual graphics-loaded “beautiful sites” but really clean-looking application interfaces!

    PS Thanks again!

    1
  47. 56

    Its great informative and useful tips..thanks a lot..keeps going on……

    0
  48. 57
  49. 58

    Great and useful article
    Thanks a lot
    i wait 4 more ………..

    0
  50. 59

    Nice to know this post. Great and informative article.

    0
  51. 60

    Nice Information

    0
  52. 61

    I’m on my second banking application re-design mission and I perfectly understand what you say here. On my current application, the existing UI is not even used by employees because they don’t want to as it is so unusable. They have to raise tickets and some offshore people use the UI in their stead. I’m new on the project and I have to evangelize UX to the team. In 95% of cases, there are no UX designers nor graphic designers. So, the developers do it all. If they are 100% technical, the UI is a disaster. If they are design and UX aware, as I am, nobody takes them seriously as developers. I was called a designer when in fact I’m a real developer with a strong design sense and a lot of experience in UIs. I have learnt a great deal from designers I worked with and from UX experts. When there are some designers, I collaborate with them. When there are none, somebody got to do it, right ? And usually, I’m the only developer who cares about UX.

    Another thing is that programming is also heavily involved in UX. In the look and feel, the look part is a designer’s job while the feel part is the developers’. The way you implement a custom component greatly influences the user experience. I have seen components users have to “fight” with in order to enter data.

    What is considered as cool (i.e not useful) by people who don’t understand anything about UX can actually be relevant (like using transitions to link the action of the user in one area to its effect in another area on the screen). There is a strong opposition to using such things as animation and sound in business applications while it can be relevant.

    0
    • 62

      Karl, I am glad that you shared your experience because those problems exists in many software projects and people should be aware of their existence.

      0
  53. 63

    Couldn’t possibly love you guys more than I already do!, thanks for making my life easier! yay!! for SM!!!

    0
  54. 64

    really cool stuff.

    0
  55. 65

    I really enjoyed the article. The information will help me with a redesign of a web app that I was tasked with

    0
  56. 66

    Interesting read! Most of the time functionality plays a key role during development of web applications so UX is pushed away. Or developers consider themselves as the usability experts.. Resulting in bad usability.

    It’s really hard to convince your management on the ROI of using usability techniques in the process. Since most of the benefits can’t be explained by figures. I have had the same thing and started doing discount usability engineering. Doing some little stuff as testing your interface with 3-5 users (real users) can give amazing useful input.

    1
    • 67

      Yes, it is hard to convince a management that it is extremely important to do discount usability testing. I am glad you find it useful.

      0
  57. 68

    Perfect authoring, very useful … Thanks for your efforts

    0
    • 69

      Willem. The problem is worse than developers considering themselves as the usability experts (although some developers are very good at it and I have also seen some graphic designers with a reckless disregard for the users). The problem is that in many cases, people don’t even care about users at all (and this is valid for most developers and more designers than you think). There are some people with a broad set of skills (experts in C++ with a degree in fine arts, go figure).

      What matters is that people, whatever their field, whether they are managers, developers, designers, should be aware of the importance of the UX, rely on UX designers when they exist, and learn as much as possible about UX if not, because they will have to take care of it themselves anyway. In most cases, nobody is going to pay for a UX designer. It will change in the coming years but that’s the current reality of the market for business applications.

      Don’t make developers your enemies. Try and find a UX aware developer in a team and he will evengelize UX for you with other developers. And remember you need developers to implement your UX ideas and graphic design ideas in the application (it’s not a given that the real application will look like your Photoshop or Illustrator design).

      In answer to your other comments, I like two quotes by Apple staff:

      “Implement solutions, not features.” (about people focusing on functionnality only)

      “Users only know what they want when they see it.” (about user testing)

      1
      • 70

        Renee Voltaggio, BTC Logic

        February 26, 2010 1:20 pm

        Karl, I couldn’t agree with you more. Because of the sometimes self-focused efforts by both the designers and the developers, there is usually a disconnect with what the user wants or needs to see. And even if a designer knows how to program, or a developer has experience with design principles, there always needs to be one more viewpoint the solution requires: the target audience. Good article Janko. We’ve all felt the pain!

        0
  58. 71

    Excellent article Janko: focussed, thorough and informative. Some great tips and advice in here too.

    It will also be an invaluable reference point to direct people towards when asked ‘What is UI design?’

    Thank you

    J

    0
  59. 72

    Please remove that audio ad – I cant believe this site allowed it.

    0
  60. 73

    Cool post!

    0
  61. 74

    Another good book on design patterns is “Web Application Design Patterns” by Pawan Vora.

    See. http://tinyurl.com/c2hfzl

    Thanks for an informative and useful article.

    0
  62. 75

    Thanks for this greate step by step guide!

    0
  63. 76

    A good article that I’ll recommend to clients. But “weblication”? “Web app”, please.

    1
  64. 77

    Woow great article, and many very useful links! :)

    0
  65. 78

    I’ve been looking for such article from ages.. You really *smashed* me this time!! :D

    0
  66. 79

    It’s very informative. Very nice article. Many Thanks to Janko

    0
  67. 80

    Hai i am very new to the article. i want to know what are all the needs to become a good UI or UX designer?

    0
  68. 82

    Thanks for a great article where you pinpoint the differences between websites and web applications. (Needed information for web developers :).

    I’m wondering where you see the differences between traditional desktop applications and web applications when it comes to usability? I agree that there may be design patterns useful for web applications, which is not relevant for desktop applications and vice versa.

    However, when doing UX on web applications I believe the methods used for evaluation, data mining etc. are the same as used on traditional desktop applications, right? (Use Cases and scenarios, personas, think aloud, IDA, iterative process etc. where you plan what methods to use in a given case).

    0
    • 83

      Janko Jovanovic

      March 1, 2010 2:52 am

      Yes, the methods would be the same and when it comes to usability there are no big differences. The article is intended for developers and designers who develop/design for Web only and who will highly unlikely work with desktop apps.

      1
  69. 85

    Thats a great one! Keep up the good work [SM]

    0
  70. 86

    Thanks for featuring Sprinklepenny! You’ll be pleased to hear that when I set out to design the site, Smashing Magazine was an invaluable guide and source of inspiration. I was literally just reading this article for some hints and was surprised to find my own site featured!

    0
  71. 87

    Beautiful. Thanks for writing.

    0
  72. 88

    The only issue I would take is with this relatively minor position: “The primary role of a website is to inform.”

    I would venture to say that the primary goal of a great many websites is to sell something, capture new customers, or generate leads. This in a small way makes them applications.

    Great article though. Thanks for the good links throughout!

    0
  73. 89

    Nice read. Very informative and enriching. Bookmarked!

    0
  74. 90

    Good work. the only thing you may ignored is, there are some cases that mixed roles of Website and Web Apps, e.g. intranet portal. I also did a reference on my site in chinese here: wavebehind.org/2010/03/websites-vs-web-applications.html

    0
  75. 91

    Very informative thanks for the hard work put in. Thanks bud:)

    0
  76. 92

    Awesome! It was the time to have web application on focus here at smash. Lot’s of good information to apply on my app. Thanks!

    0
  77. 93

    This is pure gold Janko. Thanks for compiling this information and sharing it with the rest of us. Ridding the world of bad web apps one user interface at a time…

    Cheers mate!

    0
  78. 94

    This is an awesome article and great timing for I need to cover some specific UI design styles with our developers at my job. A lot of great information and I will visit this page often.

    0
  79. 95

    Thank you for sharing an article on different types “Web Applications”, this is a much needed discussion. There are still number of people who are using Tables based HTML coding, maybe it is still good for them or what?

    Nauman Akhtar

    0
  80. 97

    WOW, I just started my career as website designer. This is the kinda article i was looking for. So so so helpful. @Janko Jovanovic: I have become ur fan. U are dam good

    0
  81. 98

    Very Very Useful Info………… Thanks a lot for such a nice article……..:)

    0
  82. 99

    thanks for keep article its realy nice one….

    0
  83. 100

    …you’re the man… thanks…

    0
  84. 101

    Vanco Ordanoski

    June 20, 2010 7:33 am

    Thanks for the article. Very informative. Some of the comments are good too.
    Here is some of my work I did for my company, Infoproject.biz: http://picasaweb.google.com/vanco.ordanoski/InfoprojectProducts?feat=directlink

    Pozdrav is Skopja.

    0
  85. 102

    A great tool to make high interactive prototypes is Justinmind Prototyper (http://www.justinmind.com). Powerful and really easy to use!

    0
  86. 103

    Aurélien Van Mesle

    July 20, 2010 12:13 am

    Thank you for this very good article, really helpful ! Currently I made an administrative management application, I draw inspiration from your research !

    0
  87. 104

    Can anyone share a good link with examples of a design for an
    online banking application?

    0
  88. 105

    It’s very useful thanks lot…

    0
  89. 106

    Thankyou for this excellent article.

    0
  90. 107

    Thank you!! Excellent article!!

    0
  91. 108

    rocking article janko brings out most of the issues which we face from day to day basis would really like you write an article on task analysis i guess it is where most of the thinking goes in . but all in all awesome article.

    0
  92. 109

    Wow.. Nice Article. i was looking same content.

    Pooja

    MLM Developers India

    0
  93. 110

    Respect to Webplication the more important thing it is an application on the web. If you have experience building application before web obviusly you can get the new enviroment: the web. Thanks it is good article about it.

    1
  94. 111

    Firstly, thanks for your article. Helps a lot.
    Besides, we always assume that the customer have a stable and constant satisfaction level. All the methods are here to found out that satisfaction point. It is changing. Because business rules keep changing. UX kepp changing. The market also has more supply than demand.
    This brings innovation. Customer asks for more ,continuously, both in design and in workflow. In erp business, customers have started to ask for tools to write their own processes.
    From UX design point, our interfaces should not be a brick. They have to be ultimate customizable. Colors, placement, components,…

    0
  95. 112

    Sincerely the best article I have read in quite some time.

    As a person who has solely built web-based business applications for the last 10yrs, I rarely find targeting articles on this area.

    So many tutorials, guides, case studies are about static content based websites rather than applications and the design, build, testing and measuring process are often wildly different.

    Look forward to your next piece.

    0
  96. 113

    nice list…i love most of them…

    0
  97. 114

    Excellent article! I’m processing a internal business web application now, and I learnned so much. (From a Chinese reader)

    0
  98. 115

    Excellent post! Lots of important tips!

    But some links are broken =D

    0
  99. 116

    Thanks for sharing, lot’s of important information and references here.

    1
  100. 117

    Hello Janko Jovanovic,

    Many Thanks for such a beautiful article (with relevant references) on UI design for Business applications. Keep it up!

    Best Regards,
    Rakesh Verma

    0
  101. 118

    In the sentence “Some people even prototype in PowerPoint.” I think you should strikethrough the word ‘people’ and add the word ‘idiots’ (No disrespect intended)

    0
  102. 119

    Very interesting article! Well done!

    0
  103. 120

    Janko, thank you for this very helpful article.
    I was wondering can you recommend a paper or book, or provide your ideas about comparation among user interface guidelines for desktop, web and mobile applications. There is great list of UI design patterns, but they can not be directly applyed for all types of applications (desktop, web and mobile). The same user requirement can be represented in different ways on user interface, still enabeling requested functionality. But if the same requirement should be implemented for different types of applications, this must be done in a different way! Is there some principles, or mappings between UI patterns between difrent types of applications.
    Best regards,
    Ilija

    0
  104. 121

    Simple and very useful.

    1
  105. 122

    Incredible article!!!
    Thanks a lot.

    0
  106. 123

    OLD ARTICLE BUT GOLD

    0
  107. 124

    please, request video tutorial for learn ui web programing. . . .!!!!!

    ^_^

    0
  108. 125

    Thank you for this wonderful article.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top