User interface design for web-based applications

In this article, I will summarize the general rules that I learned during years of designing web application user interfaces.

• Keep it simple and clear.
  Users need to solve tasks efficiently and quickly. The interface should be as simple and straightforward as possible. Each component should have it's clear purpose and the visual structure should reflect the logic behind it.
• Make it intuitive
  Don't make user stop and think about how it works. Let the layout and appearance of the components speak for themselves.
• Know the rules.
  Users expect a certain visual layout as well as functionality of the components. If you break the rules and make things look or behave differently, you should have good reasons for it and make sure user understands it.
• Use hints where necessary.
  When you are not sure, create hints that will explain the purpose and how it works.
• Look through user's eyes.
  Try to look at the interface from user's perspective. Think about what is the important information for the user and what is not so important. The most common tasks should be always at hand.

Related articles

User Interface Design for Web Applications (by Jean Tillman)

Starting with Ubuntu linux

Installation

1. download image from ubuntu.com
2. burn image to cd (using nero)
3. boot from the cd
4. install ubuntu
5. download updates
6. add essential software (see below)
7. disable pc speaker beep sudo rmmod pcspkr
8. enable numlock at startup: gedit /etc/gdm/Init/Default add: if [ -x /usr/bin/numlockx ]; then /usr/bin/numlockx on fi
9. set screen resolution and refresh rate
10. customize names of special dirs: gedit ~/.config/user-dirs.dirs (renaming/moving them in nautilus should work too)
11. uninstall open java and install sun java instead (to solve jedit display problems)

Essential software

• file manager: Krusader (+krename +kdiff3 +rar), Gnome Commander, Midnight Commander
• web browser: Firefox (+firebug)
• text editor: jEdit, vim, cream, GNU Emacs, XEmacs, Eclipse
• media player: amarok
• p2p: LinuxDC++, KTorrent, eDonkey 2000
• im: Pidgin (gnome), Kopete (KDE)
• graphic editor: GIMP
• audio editor: Audacity
• video editor: Kino
• drive partitioning: GParted
• antivirus: ClamAV
• firewall: Firestarter
• email: Thunderbird (sudo apt-get install mozilla-thunderbird)
• dvd burning: K3b
• pdf reader: KPDF, Evince, KGhostView
• desktop: SuperKaramba (KDE only!), Beryl, Compiz
• asio: JACK
• daw: Ardour, Hydrogen, Rosegarden
• games: Advanced strategy command

How to …

find a text file?

locate filename

view a text file?

more filename

edit a text file?

gedit filename

find a file containing …?

locate *.txt | grep sometext

install a package?

sudo apt-get install packagename

uninstall a package?

sudo apt-get remove packagename

define custom keyboard shortcuts?

...

mount a disk partition permanently?

sudo gedit /etc/fstab, add e.g. /dev/disk/by-label/IBM_PRELOAD /home/jj/sys_xp ntfs-3g locale=en_US.utf8,user,noauto,uid=1000,gid=1000,dmask=0000,fmask=0111,dir_umask=0000,file_umask=0111 0 0

set environment variables?

/etc/environment

edit keyboard layout?

sudo gedit /usr/share/X11/xkb/symbols/cz

set permissions recursively + conditionally?

find /home/user/demo -perm 777 -print -exec chmod 755 {} \;

make xampp start automatically after reboot?

sudo ln -s /opt/lampp/lampp /etc/init.d/lampp sudo update-rc.d -f lampp defaults

...

...

Filesystem

• bin - essential user binaries (for use by all users)
• dev - device files
• etc - config files (host-specific system config, environment vars...)
• home - home dirs of individual users
• lib - essential system libraries and kernel modules
• root - home dir of root user
• sbin - essential binaries used for system administration
• tmp - world-writable dir for temporary files
• var - variable data files like logs
• media - mount point for removable media
• mnt - mount point for temporarily mounted filesystem
• opt - add-on application sw packages
• srv - data for services provided by this system

Web predictions for 2008

What will be popular on web in 2008?

• semantic apps (ish ?)
• mobile web, mobile office, mobile web apps, services
• behavior monitoring, better personalised ad targeting
• OpenID
• content recommendation
• facebook platform
• distributed social networks
• open platforms?

source: various and 2008 Web Predictions - ReadWriteWeb

Bootstrapping PHP application

What?

Bootstrapper is a single access point (index.php script located in the web's document root) of the web application. Its purpose is to handle all incoming requests by 1. setting up the application environment, 2. routing the request to the correct action controller and 3. dispatching it.

Why?

Easy application configuration (all that is common is in single bootstrapper file).

How?

Setting up the application environment

1. set up php environment if necessary (error reporting, include paths,...)
2. set up class loader (and register is as autoloader within php)
3. load common classes
4. load configuration into registry
5. setup db and store db handle into registry
6. set up caching
7. set up front controller
8. set up router
9. dispatch front controller

Routing the request to the action controller

10. set up router

Dispatching the request (dispatch loop)

11. dispatch front controller

Links

• Blueprint for PHP Applications: Bootstrapping (part 1) by Jayson Minard
• Blueprint for PHP Applications: Bootstrapping (part 2) by Jayson Minard

ReacTable (music controller)

Today I discovered a music controller with a unique user interface. It is called ReacTable and it looks like a round table with blue backlight on top of which you place various types of blocks, each of them representing different sonic modules (VCO, LFO, Sample player,...). The parameters are controlled by rotating the blocks and moving them on the table. As you put new block to the table, icons and links between blocks are displayed on the table under each block. Here are some links: http://www.youtube.com/watch?v=0h-RhyopUmc http://www.youtube.com/watch?v=MPG-LYoW27E http://www.youtube.com/watch?v=WEDia3CFdfg http://mtg.upf.es/reactable/ http://en.wikipedia.org/wiki/Reactable

Prototype javascript framework

What?

Prototype javascript framework (prototype.js) is a library of front-end javascript classes and class extensions (Array, Ajax, Event...) aimed to help building interactive web pages. The library (current version 1.6.0) was originaly written in 2005 by Sam Stephenson and is published under MIT License (same as Ruby on Rails) which means it can be used in any project almost without limits.

Who?

Prototype core team consists of web developers from all around the world (USA, Canada, Austria, UK...) - Sam Stephenson, Thomas Fuchs, Justin Palmer, Andrew Dupont and others.

Why?

What makes this library so good?

• published as single 120kB file
• lincense allows free use in almost any project
• easy to use, simplifies many standard tasks
• standard compliant, supports all current browsers
• good documentation (e.g. official api docs, tutorials or Using Prototype by Sergio Pereira)

Where?

The latest version is available at prototypejs.org/download

All round webdesign tips

1. site logo on top of every page (linked to homepage)
2. search bar on top of every page
3. personal bar on top of every page (login/logout, profile (prefs, favs, watchlist, friends,...))
4. top tags or tag cloud on homepage
5. top searches suggestion on homepage
6. search... text in the searchbox to save space
7. clever (color coded) tabs
8. breadcrumbs nav (path from homepage or session history)
9. flag/spam button on every article/comment
10. article filtering by age (24 hours - 7 days - 30 days - all)
11. flexible column width with defined min- and max-width (in em)
12. all important information must be placed above the fold
13. the optimal column width is 30-70 characters
14. ↑ go to page top link at the bottom of the page (using up arrow)
15. thumbing/starring of articles/comments/users
16. never define only single color. always define the whole set (color and background
17. choose page <title> carefully
18. every action that adds/updates/deletes data on server should be accessed by http POST method (html form)
19. use em units when setting font-size. Don't use px because it does not respect user's preferences (is not relative to parent object's settings)

CSS global reset

When creating a style sheet from scratch it's a good thing to start with a global css reset to avoid problems with possible different presets of margin and padding properties in different browsers. The code (inspired by Andrew Krespanis's article) can look like this (notice the asterisk above h1): /* global reset */ * {padding: 0; margin: 0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address { margin:0.6em 4%; } li, dd { margin-left: 4%; } fieldset { padding: .6em; }