Reactie naar gebruiker toe na het afhandelen van een actie

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Moose -

Moose -

12/12/2012 11:46:33
Quote Anchor link
Wat voor reactie gebruiken jullie naar je gebruiker toe bij het afhandelen van een formulier? Daarmee bedoel ik iets dat aangeeft "actie gelukt", of foutmeldingen. Ik ben benieuwd naar wat nou het meest gebruiksvriendelijk is.

Ik ben al een paar manieren op een rijtje gaan zetten die ik ben tegen gekomen

- Niet het formulier tonen, maar een div met de tekst "Actie geslaagd, ga terug naar home" (iets in die richting)
- Zelfde als hierboven maar dan ook nog het formulier tonen
- Zelfde als hierboven maar dan met een ajax script

- Ajax script laten uitvoeren en een popup tonen "Actie geslaagd"
- Zelfde als hierboven met een redirect naar iets van home

- Formulier als popup tonen met Bewaar/Bewaar en sluit/Sluit waarbij je popup sluit nadat het formulier is afgehandeld, en een fout wordt weergegeven met een alert
- Bewaar/Bewaar en sluit/Sluit zonder de popup

Ik ben benieuwd wat jullie voorkeur heeft/gebruiken :)
 
PHP hulp

PHP hulp

23/09/2021 09:57:11
 
Kris Peeters

Kris Peeters

12/12/2012 12:00:35
Quote Anchor link
Mij maakt het persoonlijk weinig uit ... zolang je niet met echte popup's werkt.

Aangezien je over Ajax spreekt, doet iets me vermoeden dat je spreekt over valse popup's; die geïntegreerd zijn in het venster. Zoals bv. bij lightbox.

Wat mij betreft is dit laatste okay.
 
Chris PHP

Chris PHP

12/12/2012 12:20:58
Quote Anchor link
Je kunt na een submit een div echo'en die bijvoorbeeld in je css z-index: 1200 heeft zodat hij boven op alle andere div's komt te liggen. Dan oogt het als een pop-up maar is het geen echte, is gebruikersvriendelijker en werkt altijd ook als er mensen met pop-up blockers werken
 
Moose -

Moose -

12/12/2012 13:30:17
Quote Anchor link
Chris NVT op 12/12/2012 12:20:58:
Je kunt na een submit een div echo'en die bijvoorbeeld in je css z-index: 1200 heeft zodat hij boven op alle andere div's komt te liggen. Dan oogt het als een pop-up maar is het geen echte, is gebruikersvriendelijker en werkt altijd ook als er mensen met pop-up blockers werken


Ik was zowieso niet van plan om met popups te gaan werken, het is meer om te inventariseren wat mensen fijn vinden te gebruiken (en dus niet de implementatie). Ik ben bezig met het maken van een applicatie waarbij dit nogal vaak voor komt en ben gewoon benieuwd naar de mogelijke manieren om dit te doen (en de meest gebruiksvriendelijke)
 
Mark Hogeveen

Mark Hogeveen

12/12/2012 13:51:48
Quote Anchor link
Als je maar geen alerts gebruikt, dat vind ik lelijk, en het lijkt net alsof je het snel even hebt voor een oplossing.
Maar mensen die niet veel verstand hebben hoe websites worden gemaakt, die intereseert het niets hoe een foutmelding of een succesmelding eruit ziet. Als ze maar zeker weten dat hun actie is gelukt/mislukt.

En nog even een vraagje: wat is eigenlijk de hoogste z-index bij css?
Is er wel een maximaal getal?
En wat is het laagste getal? -1200 bijvoorbeeld ofzo?
Gewijzigd op 12/12/2012 13:53:01 door Mark Hogeveen
 
Chris PHP

Chris PHP

12/12/2012 14:02:07
Quote Anchor link
@Not Moose:
Dan zou ik gewoon boven het formulier een melding geven in het groen wanneer een submit succesvol is, en in het rood wanneer er iets fout is gegaan.

Vooral omdat je aangeeft dat het vaker voor komt, lijkt me een subtiele regel bovenaan het formulier meer dan voldoende en niet telkens een soort van pop-up/overlay van een pagina.

@Harry:
Er bestaat niet echt een maximale hoogte of laagte voor de z-index. Wel is aan te raden om niet te uitbundig te gaan werken, aangezien je dan al snel het overzicht kunt verliezen wat nu welke hoogte heeft.

Dit is een richtlijn, maar hopelijk komen mensen nooit aan deze 'absurde' getallen in de praktijk.
Quote:
Browser Max z-index value When exceeded, value changes to:
Internet Explorer 6 2147483647 2147483647
Internet Explorer 7 2147483647 2147483647
Internet Explorer 8 2147483647 2147483647
Firefox 2 2147483647 *element disappears*
Firefox 3 2147483647 0
Safari 3 16777271 16777271
Safari 4 2147483647 2147483647
Opera 9 2147483647 2147483647
Gewijzigd op 12/12/2012 14:04:31 door Chris PHP
 
Kris Peeters

Kris Peeters

12/12/2012 14:30:55
Quote Anchor link
Okay, ik ben gerust gesteld.

Ik zou dit voorstellen:
Je maakt een klassiek <form>. Je zorgt dat het formulier perfect kan werken voor gebruikers die javascript af zetten.

Je gebruikt javascript om te valideren.
Controleren of een waarde goed geformatteerd is (bv. het moet een getal zijn, of een mail adres...) kan je meestal met javascript zonder Ajax.

Met Ajax kan je controleren op unieke waarden. Username, e-mailadres, ...
Na het invullen van de username (bv. met onblur() ) ga je achter de rug van de gebruiker de naam naar de server sturen om te zien of het nog beschikbaar is.
Met het Ajax antwoord laat je een berichtje zien naast/boven de <input>. (eventueel met een image (duim omhoog/omlaag; smiley; check/kruis ...) ).

Ik vind het persoonlijk heel erg storend wanneer ik een volledig formulier moet doorsturen en dan twee of drie keer moet verzenden na berichten over 'al bezet', 'paswoord moet dit of dat bevatten', ...
Daar is asynchroon valideren een grote meerwaarde voor het gebruikersgemak
 
LEDfan nvt

LEDfan nvt

12/12/2012 15:28:01
Quote Anchor link
Ik gebruik zelf Noty om notificaties weer te geven. Bv. als het formulier fouten bevat laat ik een rode 'popup' komen en dan de niet of fout ingevulde formulieren maak ik dan rood. (Of zet ik meer uitlegbij) Je hebt ook een groene notificatie, bv. als het formulier is geslaagd. Ik heb zelf op een niet zo'n nette manier ervoor gezorgd dat de noty auto weg gaat.

Hou zeker rekening met de tips van de post boven mij.
 
Kris Peeters

Kris Peeters

12/12/2012 15:48:00
Quote Anchor link
Trouwens, niet vergeten dat de vernieuwde HTML ook al veel voor je betekent.

Je hebt de placeholder: zie http://www.w3schools.com/html5/att_input_placeholder.asp

Je hebt nieuwe data types, zoals <input type="email"> die al controleren of de formattering goed is.

Dat alles verlicht het werk.
 
Moose -

Moose -

12/12/2012 17:06:08
Quote Anchor link
LEDfan nvt op 12/12/2012 15:28:01:
Ik gebruik zelf Noty om notificaties weer te geven. Bv. als het formulier fouten bevat laat ik een rode 'popup' komen en dan de niet of fout ingevulde formulieren maak ik dan rood. (Of zet ik meer uitlegbij) Je hebt ook een groene notificatie, bv. als het formulier is geslaagd. Ik heb zelf op een niet zo'n nette manier ervoor gezorgd dat de noty auto weg gaat.

Hou zeker rekening met de tips van de post boven mij.


Ja ik denk dat ik ook zoiets ga gebruiken als dat Noty. Ik had al iets in die trend geschreven, maar ik ga het zeker bekijken thanks!


Kris Peeters op 12/12/2012 15:48:00:
Trouwens, niet vergeten dat de vernieuwde HTML ook al veel voor je betekent.

Je hebt de placeholder: zie http://www.w3schools.com/html5/att_input_placeholder.asp

Je hebt nieuwe data types, zoals <input type="email"> die al controleren of de formattering goed is.

Dat alles verlicht het werk.


Cool maar ik heb mijn validatie afhandeling al geschreven. Ik zoek meer een leuke, gebruiksvriendelijke manier om het weer te geven
 
Kris Peeters

Kris Peeters

12/12/2012 17:44:37
Quote Anchor link
Okay, een beetje flauw (mijn soort humor)
Een voorbeeldje waar je misschhien inspiratie uit kan halen
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (!empty($_GET['ajax'])) {
    // ajax afhandeling; dus validatie
    if (isset($_POST['username'])) {
      if (strtolower($_POST['username']) === 'homer') {
        echo 0;
      }

      else {
        echo 1;
      }
    }

    exit;  // na een Ajax verzoek wil je niet dat de rest ook wordt uitgevoerd
  }
  else {
    // verwerking formulier
  }
}

?>

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Validatie</title>
    <style>
      #username_message img {
        height: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Registreer je in de "No Homer's Club"</h1>
    <form action="" method="post" id="my_form">
      <input id="username" name="username" type="text"/> User Name  <span id="username_message"></span> <br>
      <input id="email" name="email" type="text"/> Email  <br>
      <input type="submit" value="GO" id="submit"/>
    </form>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
    <script>
      $(document).ready(function(e) {  // dit wordt uitgevoerd op het moment dat de pagina geladen is en de DOM klaar is om te gebruiken
        $('#username').blur(function() {
          $.ajax({
            type: "POST",
            url: '?ajax=1',
            data: {username: escape($(this).val())},
            success: function(data) {
              if (data == 1) {
                 $('#username_message').html('<img src="http://iheartpublix.lefora.com/composition/attachment/decadd20a19589239f51b02b33f3e343/1168309/Approve48x48.gif" title="beschikbaar">');
                 $('#username').css({borderColor: 'auto'});
              }
              else {
                 $('#username_message').html('<img src="http://iheartpublix.lefora.com/composition/attachment/9e1f2d3ee2b962db0567c62ae8999e32/1168387/Thumbs-down48x48.gif" title="Username niet meer beschikbaar"> Dit is de "No Homer\'s Club!!"');
                 $('#username').css({borderColor: 'red'});
              }
              
            }
          });
        });
      });
    </script>
  </body>
</html>


Je kan nog veel meer wanneer je met JSON werkt. Dan kan je iets echo'en als
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?php
json_encode(array(
  'success' => 1,
  'message' => 'Username beschikbaar',
  'border_color': 'auto'
));
?>

en heb je dus veel meer speelruimte in javascript.
Gewijzigd op 12/12/2012 17:46:20 door Kris Peeters
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.