Care2x Development Blog

All the news regarding Care2x development

UI Changes

One of the most important things on refactoring Care2x is on changing a few big bottlenecks it still has:

  1. It has a very ugly interface almost impossible to change
  2. UX and Usability is still a big issue
  3. Huge load of uncessary data
  4. Unclear steps in some places which turn it prune to error
  5. Unusable main menu with all in that turns productive work almost impossible

Some solutions I envisage to solve this:

  1. Creation of an interface framework containing only <div /> with proper id
  2. All <input /> should have  accesskey and name, class and id; and proper <label /> with a related id
  3. All <form /> should have <fieldset /> with accesskey and id and/or class to ease accessibility and design
  4. Change menus to inside a <div /> (id=”navigation”) and use <ul /> organization for menus and submenus. Menus must be re-group into understandable and skinable sections so designers can choose to use Suckerfish-like technics or other technics like jQuery Superfish for navigation and still keeping them accessible for screen readers. Menus should use accesskey whenever possible to avoid the need of using a pointer device.
  5. Use of a CSS framework, like those found at
  6. Ditch as much as possible the use of <iframe /> and replacing it by Ajax’ed HTML content replacements, using some sort of Ajax Framework. I do prefer jQuery with jQuery UI but other may fancy others. Care2x should only use one and only one framework to avoid confusion and framework colision.
  7. Use something as jQuery Ajaxify for faster and easier page load and dataflow control between sections. See the demos for integration with other plugins, it’s very interesting.
  8. Use modal Ajax’ed popups to ease data introduction and viewing help, like jQuery UI Dialog or jqModal or jQuery Facebox.
    With modal Javascritp dual clicking can be hugelly avoided. This here is a good example of popup form dialogs.
  9. Use Ajax inline messaging to warn or send messages back to users, like jQuery sNotify and/or jQuery InnerFade and/or jQuery Humanized Messages or some other simplier tricks like this or this.
  10. Use also loading messages à lá GMail to warn user that something is happening in the most unobstrusive way
  11. Use jQuery jTruncate to hide uncessary long info from cluttering the page, leaving just the needed excerpt so people could see if it is important to expand it or not.

Some of you may say that I propose a lot of Ajax and javascript but this is a web app, hence stateless, and we must stop loading 40k if we can load just 20bit. Also, using CSS and Javascript frameworks will kill the browser incompatibilities and let us just concentrate in what really matters; making Care2x just work!

For today this are the issues I wished to push forward. Have your say.


Filed under: c3x, New Directions, , , , , , , , , ,

4 Responses - Comments are closed.

  1. […] This post was mentioned on Twitter by Humaneasy Consulting, Humaneasy Consulting. Humaneasy Consulting said: Wrote a new post at Care2x Development Blog. Waiting for your thoughts on it. […]

  2. Gjergj Sheldija says:

    thanks Lopo, this is exactly the direction in which i’m moving!

  3. Glad we are in the same tune 🙂

  4. meaningfull says:

    Care2x Development Blog: an uncompromised way to refresh ideias…

    Gjergj Sheldija (a.k.a. Mizuko) invited me to write at the Care2x Development Blog, which I gladly accepted.  I think that a blog could be a lightier way to discuss ideias on Care2x and its evolution. I hope that, with time, some other developers (Clau…

%d bloggers like this: