Site Ratings & Reviews - Re: Your critiques on a helpdesk-style site

Author

Re: Your critiques on a helpdesk-style site

Chris Beall

2005-07-09, 11:16 pm

Damien wrote:

> Hi to al,
> After a couple hourssweating on a "lite" intranet Helpdesk, I've come to
> something that looks useable. well, I can't go any farther on my own.
>
> What do you think of it ?
> http://deltapi2.free.fr/test/helpde...php?contactid=2

Damien,

You get a lot done in "a couple hours"!

Looks good in Netscape 7.1 at 600 X 800 full screen. Design seems fluid
at most reasonable window widths, although the help page really wants
the full 800 pixel width.

No navigation problems. Text is easy to read. Although I don't speak
French, the navigation and data-entry field names seemed clear and
logically arranged.

You use a Transitional DOCTYPE. That seems a bit out of date. I'd use
Strict.

You've mixed remote CSS with inline styling, such as <th
style="width:65px;">Etat</th>. Perhaps that's just a leftover from
development, but moving it all to the separate CSS would make
maintenance easier. Hmmm, it looks as if both my browsers ignore this
particular example anyway, adjusting the cell width as the window width
changes, as the <table> tag specifies.

On Netscape 7.1, when text is enlarged, the list boxes, such as
Priorité, do not increase height to correspond, so the text is clipped
at the bottom. I suspect that's a browser bug. IE 6 is OK.

On the home page, there's a (?) next to two of the columns. It's a
link, but clicking it did nothing in either Netscape 7.1 or IE 6. Ah, I
see it points to the same page, in which case I don't understand its
purpose.

On the Nouveau dossier page, if I click on the envelope symbol next to
Courriel, my e-mail client comes up. If I click on the symbol next to
Propriétaire or Sous Traitant:
- In Netscape 7.1, nothing happens.
- In IE 6, I get an error message stating that "ListeAdressesMail" is
undefined.

aide.php takes a LONG time to load, due to the size of screen-shot
images. It might be better to split it into multiple pages. Hmmm, and
why is it .php? Is there dynamic content in there somewhere?

I did a search for 'Truc' and it correctly found the one dossier for
which he is the client, but I searched for 'Damien' and it didn't find
the record in which you were the responsible party. It also didn't find
anything when I searched for 'Ouvert'.

No matter what I did, I could find dossier 1 and 4, but never 2 or 3.
Perhaps that's a result of the test environment. If, on the other hand,
you allow records to be DELETED, I would recommend against that. You
may want to refer to closed incidents several years later.

You've specified <link rel="SHORTCUT ICON"
href="../interface/icones/icone-pinet.ico">, but if that's supposed to
display a favicon, it isn't working. Perhaps the directory reference is
wrong for this demo environment.

Nice work,
Chris Beall

Damien

2005-07-10, 11:16 pm

Chris Beall wrote :
> You get a lot done in "a couple hours"!
First, thank you very much for your thorough review !
It's the same kind of "couple" as in "went downtown with a couple
friends for a couple drinks" :)

> You use a Transitional DOCTYPE. That seems a bit out of date. I'd use
> Strict.
That's true. Actually I've always used this one. For the moment, I don't
see the need for strict. Moreover, I think the latter does not accept
Iframes, but I have to check that.

> You've mixed remote CSS with inline styling, such as <th
> style="width:65px;">Etat</th>. Perhaps that's just a leftover from
> development, but moving it all to the separate CSS would make
> maintenance easier. Hmmm, it looks as if both my browsers ignore this
> particular example anyway, adjusting the cell width as the window width
> changes, as the <table> tag specifies.
True too, I have to do some more code cleaning. I'm always struggling
with column widths...

> On Netscape 7.1, when text is enlarged, the list boxes, such as
> Priorité, do not increase height to correspond, so the text is clipped
> at the bottom. I suspect that's a browser bug. IE 6 is OK.
Looks quite ok in Firefox, although box widths need to be set with
relative units. I have to say I've given up on Netscape... For now I aim
at IE5+ & FF 1+. With the cleanest possible code(ie most ocmpatible), of
course.

> On the home page, there's a (?) next to two of the columns. It's a
> link, but clicking it did nothing in either Netscape 7.1 or IE 6. Ah, I
> see it points to the same page, in which case I don't understand its
> purpose.
I have to work on that too. Originally I used it to have a tooltip next
to the filter name. I have to find a more elegant way.

> On the Nouveau dossier page, if I click on the envelope symbol next to
> Courriel, my e-mail client comes up. If I click on the symbol next to
> Propriétaire or Sous Traitant:
> - In Netscape 7.1, nothing happens.
> - In IE 6, I get an error message stating that "ListeAdressesMail" is
> undefined.
Yes, for "privacy" purposes I got rid of the email adresses of the group
I'm going to be using the HelpDesk on :)

> aide.php takes a LONG time to load, due to the size of screen-shot
> images. It might be better to split it into multiple pages. Hmmm, and
> why is it .php? Is there dynamic content in there somewhere?
Yes, HDi is originally designed for an intranet. And yes, I need the
..php to manage the session (user id, service, level...). The menu is
also dynamic (absed on rights...).

> I did a search for 'Truc' and it correctly found the one dossier for
> which he is the client, but I searched for 'Damien' and it didn't find
> the record in which you were the responsible party. It also didn't find
> anything when I searched for 'Ouvert'.
I had originally thought up the system with the idea that you get access
only to the "cases" (dossiers) that you own or those that have been
transfered to you. "Clients" don't get access to HDi.
Nothing for "ouvert" ? Just tried it and found some records.

> If, on the other hand,
> you allow records to be DELETED, I would recommend against that. You
> may want to refer to closed incidents several years later.
Cases can be "closed" and are hidden by default, except when you make a
search for "all states". I did implement the possibility to delete cases
more for "cleaning mistakes", not to get rid of the closed cases.

> You've specified <link rel="SHORTCUT ICON"
> href="../interface/icones/icone-pinet.ico">, but if that's supposed to
> display a favicon, it isn't working. Perhaps the directory reference is
> wrong for this demo environment.
That's right :)

Thanks again, Chris !
Regards,
Damien
--
"To ask when you already know is politeness.
To ask whe you don't is the rule"
Yamamoto Tunetomo, "Hagakure"

kchayka

2005-07-12, 12:05 am

Damien wrote:
>
> http://deltapi2.free.fr/test/helpde...php?contactid=2

Your chosen font-size is too small for my reading pleasure. What's wrong
with leaving body text at 100%? If you think text is too large at that
setting, then *your* browser is the one that's not configured correctly,
not mine. You have the double-whammy of nested divs, which end up with
progressively smaller text. The computed font-size for the link next to
the "Motif" input is less than 60%. That makes it pretty unreadable.

You set all the div container widths in px units. With my
larger-than-average default text size, almost all of the inputs are
wider than their container (input size="41" is way wider than 240px).
Look at it in any gecko browser (Firefox, Netscape, mozilla, etc) and
zoom text a few notches. It looks pretty sloppy.

If you set the container widths in em units rather than px, they will
automatically adjust with varying text sizes.

Other than that, I don't really have an opinion. Style-wise it's just
another boring form. :) I didn't bother following any links because I
don't read French.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Damien

2005-07-12, 12:06 am

kchayka a écrit :
>
> Your chosen font-size is too small for my reading pleasure. What's wrong
> with leaving body text at 100%?
First, thanks for your input ! I appreciate a documented opinion ;)

Because there is so much information to be displayed, I chose to try for
small font sizes rather than slider bars. I've tried to adjust sizes so
that nesting doesn't make text nanoscopic ;) In my FireFox 1.0.4 and IE
6 SP1, it looks "ok". True, I don't use the "larger text" setting.

(snip)
> You set all the div container widths in px units.
That's true too. Until now I had worked on functionnality more than on
code excellence.

BTW, what's the width in em of a full screen (800 and 1024 px) ?

(snip)
> Other than that, I don't really have an opinion. Style-wise it's just
> another boring form. :)
(snip)
:D
I know... I've tried a few "eye-candy" tricks, but I'm no visual artist,
definitely not :)
Any suggestions ? Do you know a site with forms that look both nice and
functionnal ?

Thanks again for your input !
BR,
Damien

2005-07-12, 12:06 am

Damien wrote:
> kchayka a écrit :
[color=darkred]
> Because there is so much information to be displayed, I chose to try for
> small font sizes rather than slider bars.

And when *you* choose a small text size, that your viewer cannot read, they
will most probably up their font size anyway, to something *they* can read.
If they know how. If they don't know how and really cannot read it they may
simply move on to the next site.

[color=darkred]
> That's true too. Until now I had worked on functionnality more than on
> code excellence.

Specifying those container widths in ems *is* functionality, or rather
usability.

> BTW, what's the width in em of a full screen (800 and 1024 px) ?

How long is an elastic band?

The width in ems of a full screen (which you should not be interested in
anyway, you should leave all such things up to your viewer) depends on the
currently selected font size. The "width of a screen in ems" is really an
invalid question.

Build yourself a page with a coloured div, say 10 ems wide. Change your font
size (Ctrl mouse wheel or the equivelent). Admire how the width of the div
changes. Also admire how any text within that div will change in width
roughly in sync with the div. This also applies to form elements, which is
what kchayka is getting cranky about :-)

Cheers
Richard.

Damien

2005-07-12, 12:06 am

rf a écrit :
> Damien wrote:
> And when *you* choose a small text size, that your viewer cannot read, they
> will most probably up their font size anyway, to something *they* can read.
> If they know how. If they don't know how and really cannot read it they may
> simply move on to the next site.

Hello Richard,
Thanks for the input !

Until now, my philosophy was that I need to make certain decisions to
achieve a goal. I mean, a car designer has to decide how wide a steering
wheel is. However I'm willing to make efforts so that users can adapt
the tool to his habits. But it takes a lot of work :)

(snip)
> How long is an elastic band?
> The width in ems of a full screen (which you should not be interested in
> anyway, you should leave all such things up to your viewer) depends on the
> currently selected font size. The "width of a screen in ems" is really an
> invalid question.
(snip)

Then, how can I know what width to use for each div ? *My* decision as
author/designer is that it is best to have 3 panels side by side. On a
"classical" configuration, 1024x768 screen, browser maximized, medium
size font, there has to be a certain length. Consequence : any smaller
screen will "wrap" the last panel, as any bigger font will.

So my question was not really "how long is an elastic band", but "how
long is an elastic band at 20°C with no traction applied [add other
standard conditions here]" :) Sorry for not being precise enough :)

I am aware of usability concerns, but as a little-more-than-newbie,
sunday-coder, I'm already happy to have something that does not crash
here and there. And I'm also happy that you are raising issues this fine
:) (for my reference frame, ok).

Regards,
--
Damien

"I asked Dad if I was gifted when I was born.
He said they would certainly not have paid for me."
Calvin & Hobbes (B. Watterson)

Beauregard T. Shagnasty

2005-07-12, 12:06 am

Damien wrote:

> Then, how can I know what width to use for each div ?

The answer is: whatever is necessary. <g>

> *My* decision as author/designer is that it is best to have 3
> panels side by side. On a "classical" configuration, 1024x768
> screen, browser maximized, medium size font, there has to be a
> certain length. Consequence : any smaller screen will "wrap" the
> last panel, as any bigger font will.

Have a look at Ben Meadowcroft's nice templates. You can probably see
how it is done.
http://www.benmeadowcroft.com/webde...s/3-column.html

--
-bts
-This space intentionally left blank.

kchayka

2005-07-12, 12:06 am

rf wrote:
>
> kchayka is getting cranky

Am not!

BTW, nice to have you back :)

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

kchayka

2005-07-12, 12:06 am

Damien wrote:
>
>
> BTW, what's the width in em of a full screen (800 and 1024 px) ?

As already mentioned, the number of ems that can fit within a given
viewport size depend on the font size.

Just don't confuse viewport size and screen size, they are very
different things. Many people don't use full-size browser windows,
especially those with larger monitors.

One reason why your forms don't adapt very well is because you are
mixing HTML size attributes with CSS widths. The two often don't play
well together. You can at least partially resolve conflicts by adding
some max-width rules to your stylesheet, for example

input, textarea { max-width:100% }

This should prevent the inputs from extending outside their div
containers (whatever size they are), at least in those browsers that
support the max-width property. Those browsers include Opera and gecko,
which are 2 that will benefit most from this.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

Damien

2005-07-12, 12:06 am

kchayka a écrit :
(snip many crucial points)

OK, I get your point. Now I'm all impregnated with the accessibility
philosophy :)

Over the next few days I'll try to put that down to real code, see if I
can make my tool more accessible without pulling my hair.

Regarding Gecko browsers, well... Firefox is my personnal choice. But
among the users I aim at, there's no way I can make them switch from
whatever version of IE they're using...

Thanks to all for your input on accessiblity & layout. I'll try (if you
don't mind) to post a new version after the 14th of july's holyday.

Damien
--
"How many roads must a man walk down
before you can call him a man ? "
Dylan