search

lhcb / Condorcet

3 stars 3 forks source link

Voting interface #7

Closed apuignav closed 9 years ago

apuignav commented 9 years ago

Implement an "alternative" voting interface where one has to drag candidates explicitly instead of radio buttons.

Then we can compare the two approaches and see which one we like best.

alexpearce commented 9 years ago

We should aim for progressive enhancement when implementing this.

The nicest thing about the radio buttons is that they are simple, using standard HTML elements, and require no JavaScript. (There is some JS that only allows one selection per column, the per row restriction taken care of natively by the browser, but the server performs that check anyway.) So, I think a nice JS implementation of the drag-and-drop UI would be to

  1. Hide the radio buttons
  2. Show the drag-and-drop interface
  3. When the user interacts with the drag-and-drop, update the radio buttons

This has the benefit of

  1. Falling back to the radio buttons for visitors without JS; and
  2. No server-side changes are needed, as the same form information would be sent to the server.
apuignav commented 9 years ago

I agree, I'll try to see how to implement this.

apuignav commented 9 years ago

Hi,

I was having a look and the server anyway uses jQuery. I could reimplement what I had in jQuery, so nothing extra is added, but if we're already loading jQuery there's no use in doing weird things for people without JS and so on.

What do you think?

alexpearce commented 9 years ago

The only app-specific JS is in main.js, which ATM just modifies the radio button behaviour.

If a user doesn't have JS enabled then they could select multiple candidates in each column, but the server doesn't allow a vote to be cast if this is true, so it doesn't matter that JS is unavailable. The server doesn't use jQuery, it's used to add a bit of client-side ‘validation’.

What I was imagining was:

  1. Add the markup required for the drag-and-drop stuff only if the user has JS enabled (i.e. add it to the DOM with JS)
  2. Hide the radio buttons
  3. Listen to the drag-and-drop events to update the radio buttons according to the dragged ordering

Then the server logic doesn't need to change, and the no-JS behaviour remains.

apuignav commented 9 years ago

Fair enough. I will do it like this and then we see.

(As an aside) Honestly, who doesn't have JS now? I think it's kind of a reasonable requirement, we should not be designing for 10-year-old browsers.

alexpearce commented 9 years ago

I know it seems a little antiquated. It's largely a matter of accessibility and robustness, and is somewhat a matter of personal taste. JS is not needed for this application, so in my opinion we should make it work without it.

JavaScript is not available to users who use assitive technologies like screen readers. Some users disable JS for security reasons. Designing with progressive enhancement means starting with the most basic, most widely available technologies first, and then adding things that make the experience better for users who have the technology.

apuignav commented 9 years ago

I implemented something that does what we discussed. It works well in my tests, albeit it's a little bit ugly. I guess with a bit of CSS magic we can make it look better, but functionality first!

gdujany commented 9 years ago

Yes, I played a bit around with it and I find it already quite nice and disabling JavaScript makes the old interface pop up again as expected. https://gdujany.web.cern.ch/gdujany/Condorcet/ Just a minor remark: when I move the rectangles with the candidates it's like there were two rectangles and one stays behind the other making things slightly confusing. My knowledge of JavaScript is almost non existent so I havesn't tried to track down the cause but if it was simple to fix that would be great.

apuignav commented 9 years ago

Hi Giulio,

I'm not sure I understand, could you post a screenshot so I can see what you mean ? Probably the interface needs some tweaking still...

Thanks, Albert On Apr 8, 2015 12:34 AM, "gdujany" notifications@github.com wrote:

Yes, I played a bit around with it and I find it already quite nice and disabling JavaScript makes the old interface pop up again as expected. https://gdujany.web.cern.ch/gdujany/Condorcet/ Just a minor remark: when I move the rectangles with the candidates it's like there were two rectangles and one stays behind the other making things slightly confusing. My knowledge of JavaScript is almost non existent so I havesn't tried to track down the cause but if it was simple to fix that would be great.

— Reply to this email directly or view it on GitHub https://github.com/gdujany/Condorcet/issues/7#issuecomment-90750244.

gdujany commented 9 years ago

Here they are

btw, I also noticed that also the text should be changed if the new interface appears

gdujany commented 9 years ago

screen shot 2015-04-08 at 10 33 47 screen shot 2015-04-08 at 10 34 44 screen shot 2015-04-08 at 10 35 04

apuignav commented 9 years ago

Oh, I see, this is quite tricky... I will see if I can fix it.

About the text, I was about to do that!

Albert

On Wed, Apr 8, 2015 at 10:44 AM, gdujany notifications@github.com wrote:

[image: screen shot 2015-04-08 at 10 33 47] https://cloud.githubusercontent.com/assets/5243726/7041724/2f858c82-dddc-11e4-9d9b-4f7253d43a35.png [image: screen shot 2015-04-08 at 10 34 44] https://cloud.githubusercontent.com/assets/5243726/7041725/2f9a55ea-dddc-11e4-9441-e68132b46e8b.png [image: screen shot 2015-04-08 at 10 35 04] https://cloud.githubusercontent.com/assets/5243726/7041726/2fa0cfd8-dddc-11e4-9dc1-974b16834d7d.png

— Reply to this email directly or view it on GitHub https://github.com/gdujany/Condorcet/issues/7#issuecomment-90844456.

Dr. Albert Puig Navarro Laboratoire de Physique des Hautes Energies Ecole Polytechnique Fédérale de Lausanne (EPFL) BSP 614.4 (Cubotron UNIL) CH-1015 Lausanne EPFL Phone: 021 6939808 CERN Phone: 72518

apuignav commented 9 years ago

Oops, I merged the changes regarding this in the other pull request by mistake. Please check that it looks better now.

gdujany commented 9 years ago

mmm, I am not sure if it's just me but now things look a bit worse:

apuignav commented 9 years ago

That's bizarre. I fixed these three issues :-(

Let me check, I guess I forgot to commit something.

On Wed, Apr 8, 2015 at 12:09 PM, gdujany notifications@github.com wrote:

mmm, I am not sure if it's just me but now things look a bit worse:

  • I have both the table and the draggable interface and both texts
  • the problem with the two boxes is still there
  • the table is filled when all the candidates are moved in the left column but if I then change the order the table is not updated and when I vote I cast the wrong vote

— Reply to this email directly or view it on GitHub https://github.com/gdujany/Condorcet/issues/7#issuecomment-90869528.

Dr. Albert Puig Navarro Laboratoire de Physique des Hautes Energies Ecole Polytechnique Fédérale de Lausanne (EPFL) BSP 614.4 (Cubotron UNIL) CH-1015 Lausanne EPFL Phone: 021 6939808 CERN Phone: 72518

gdujany commented 9 years ago

screen shot 2015-04-08 at 12 06 35 2 screen shot 2015-04-08 at 12 07 07 2 screen shot 2015-04-08 at 12 06 13 2 screen shot 2015-04-08 at 12 06 35 2

apuignav commented 9 years ago

Are you sure you're up to date? I did, on a clean folder

git clone git@github.com:gdujany/Condorcet.git
python manageDB.py --reset
DEBUG=1 python Condorcet/__init__.py

and tested it with Safari, Chrome and Firefox. It's working for me... Are you sure you're completely up-to-date?

gdujany commented 9 years ago

ops, my wrong doing git pull origin master said that I was up to date but cloning a new repository from scratch solved two problems out of three: I still have the issue with the double box screen shot 2015-04-08 at 12 23 06 2

apuignav commented 9 years ago

Yes, but now the other box is dimmed, I think it's better, isn't it?

alexpearce commented 9 years ago

It might be best with the box dimmed as it is now, but without the text inside it, hinting that “this the placeholder for the box you're holding”.

apuignav commented 9 years ago

I merged a change so the box disappears. It is easy to change it to dimmed with no text, if you prefer (I had not seen @alexpearce comment).

gdujany commented 9 years ago

Awesome, I like it a lot this way. Sorry if I am picky but not knowing css and JavaScript I don't know how difficult it is to implement, can you make the orginal box to disappear immediately when you click on it? I know it's only a meaningless detail but if it's just a line of code I would like to avoid something like screen shot 2015-04-08 at 13 50 13 2

apuignav commented 9 years ago

Picky-ness is what we want :-) I'll try and report back.

On Wed, Apr 8, 2015 at 1:50 PM, gdujany notifications@github.com wrote:

Awesome, I like it a lot this way. Sorry if I am picky but not knowing css and JavaScript I don't know how difficult it is to implement, can you make the orginal box to disappear immediately when you click on it? I know it's only a meaningless detail but if it's just a line of code I would like to avoid something like [image: screen shot 2015-04-08 at 13 50 13 2] https://cloud.githubusercontent.com/assets/5243726/7044666/3b80b18c-ddf6-11e4-8baf-cb638517b3b8.png

— Reply to this email directly or view it on GitHub https://github.com/gdujany/Condorcet/issues/7#issuecomment-90889923.

Dr. Albert Puig Navarro Laboratoire de Physique des Hautes Energies Ecole Polytechnique Fédérale de Lausanne (EPFL) BSP 614.4 (Cubotron UNIL) CH-1015 Lausanne EPFL Phone: 021 6939808 CERN Phone: 72518

apuignav commented 9 years ago

This should be taken care of now.

gdujany commented 9 years ago

Perfect!