Web GUI Design Tips for UX Professionals

Web GUI design seems to be a science that people often overlook, at least in the aspect of acknowledging that it’s a different ballgame than UI design for mobile or traditional software platforms. With the ever growing popularity and ubiquity of SaaS, which is powered by web technology almost entirely, this is going to be a problem if people don’t start treating it like the unique science it really is. But, you may ask, what sets web GUI design apart? How and why does it require a different approach, and in that light, what are some good pointers for handling this right? Well, that’s a lot to answer for, and more than we have time for today. But don’t despair, because what I am going to give you are some of the more important tips and key differences, to get you started in the right way. Pay attention, because web design is becoming an increasingly mainstream platform for everything, and this isn’t going to undo or slow down in its exponential growth, so you really do want to get this right! #1 – Popups: Do and Don’t I originally wanted to caution you in general about popups or floating AJAX components. Due to the fact that people have grown so disenchanted with the abuse of automatic new tabs, popups, and the like, most people, myself included, have popup blocker extensions in our browsers. This means that sometimes sites that have genuine constructive use of them will malfunction until we realize we need to grant them permission. In that sense, I want to recommend telling users “this site requires popups to operate properly”. Don’t try to fight people blocking them, because we will never give up this blocking capacity now. But, what I do want to say is that you should avoid using these for superfluous and annoying things like social network buttons and link exchanges. These are so annoying, and I’m sorry, but your Facebook, Twitter and Pinterest buttons aren’t such crucial things that they have to force them into our view every second. #2 – Endless Scrolling: It’s Ok Except When It Isn’t Endless scrolling is basically the design practice (primarily seen in user content driven constructs) where you scroll so far, and it loads more items automatically, versus requiring the next page to be loaded. The idea is to reduce the number of disruptions where a whole page has to be requested and served. This isn’t a bad thing in many cases, such as on Twitter, where all the information you need about the tweet is right there, with no further navigation to get more. It’s a bad idea sometimes, though. If the items in the endless scrolling are just summaries, and to get the full item, you have to load a new page, and then navigate back to the list after being done with it, you are met with an extreme frustration. You have to scroll and scroll to find your place again, even if you can. If you want to use endless scrolling in this circumstance, make sure it opens the clicked item in a new window or tab. Be sure to warn users that it needs to do this, like I said before. #3 – Simplicity is Bliss Don’t overdo it in making the controls pretty or stylized. YouTube has been making this mistake lately, and it makes the UI hard to spot, and the familiarity people have from practice with the functionality of certain visual representations is undermined when they don’t look like they expect them to. Be simple and make buttons, scroll bars and the like big, bright and visible. Don’t place artsy-ness above practicality. Web GUI design has become a bit of a waltz with the users who have blocked standard functionalities due to abuses of them and it’s also very much about knowing that navigation and reloading can break things. Follow these tips and you’re on the right path, but there’s much more to learn. Here are some more graphical user interface examples.