Pronalazaštvo: Višeizborni “Windowed Slider”(prozorski slajder) korisnički interfejs

Video sam lep “Show HN” predlog na [http://news.ycombinator.com/item?id=4594264] na Hacker News od nekoga ko je strasno sastavio veoma lepu jquery slajder (klizač) plugin. Ljudi su pomenuli u komentarima zašto su slajderi loš izbor zbog svih onih stvari koje sam i ja otkrio, sve dok se nisam poigrao sa mojom prozorskom verzijom. Ali slajder plugin je napravljem sa takvom strašću da sam jednostavno morao da napišem članak i podelim svoja otkrića. Postoji nada. Slajder može biti popravljen. U stvari može biti načinjen boljim i može biti napravljen da operiše sa više od dve opcije.

Prvo, hajde da razgovaramo o tome zašto su slajderi loš izbor:

  • Slajderi komlikuju jednostavne zadatke koji dozvoljavaju korisniku da izaberu između “Da/Ne”, “True/False” ili “On/Off”. Skoro svaki put kada vidim slajder, on je postavljen na mestu na kom bi kvadratić za potvrdu (štikliranje) bio bolje i manje zbunjujuće rešenje. Kvadratići su jednostavniji, razumljiviji, dok slajderi nisu.
  • Slajderi zauzimaju više prostora od kvadratića, čije uključivanje/isključivanje je razumljivije.
  • Nije jasno desktop korisnicima da li treba da kliknu i prevuku slajder u poziciju. Da li treba da kliknu dugme nadajući se da će samo da se isključi, ili da kliknu na opis pored njega (elaboriraću ovo odmah).
  • Imena slajdera su netačna zato što izabrani opisi nisu statični i prekriveni su u traci za slajder samim slajderom što je samo po sebi pogrešno. Pokrivate i krijete korisničke opcije.
  • I na kraju, slajderi sami mogu biti dvosmisleni i zbunjujući. Aktivni prekidač sam je suprotan opisu, a opis se nalazi na putu prekidača.

Rešenje: Samo koristiti kvadratić za štikliranje.

Меđutim, postoji nekoliko situacija u kojima je slajder bolje rešenje za korisnički interfejs:

  • Da uključite/isključite opciju koju je potreno opisati, kao što je slajder u kontrolnom panelu Vašeg bloga “Published | Unpublished” kao izbor za nacrte članaka na kojima radite.
  • Slajder na sajtu gde članovi mogu promeniti css stil od “Dark” teme u “Light” temu.
  • Da zamenite iz zaključanog u otključano stanje ekrana ili aplikacije.

Меđutim, slajder ima manu...

  Da li je prvi prekidač on ili off? Da li je drugi prekidač on ili off?

Ако ste navikli na ovaj korisnički interfejs ova je mačji kašalj (Prvi prekidač je OFF zato što kaže da je OFF, opis Vam pokazuje trenutno stanje prekidača) ali većini korisnika odgovor nije tako očigledan i neposredan. Pogotovo kad tek počnu interakciju sa interfejsom.

Drugi problem je razdeljen. Počinje kada korisnik vidi slajder prekidač:

A postaje veoma loš kada korisnik pokuša da komunicira sa njim:

Šta da radim?:

  1. Ako ja kliknem belo dugme slajder se pomeri na levo i prikaže da je sada “ON”, ja pretpostavim da je prekidač sada uključen.
  2. Ако ja kliknem na “OFF” tekst slajder će da pređe na “OFF” mesto i otkriće se “ON” tekst. ja pretpostavljam da to znači da je prekidač sada na OFF i da ja imam opciju uključivanja ga time što ću da kliknem na novootkriveni tekst “ON”?
  3. Ako “uhvatim” slajder i prevučem ga na drugu stranu, mogu da vidim “OFF” na jednoj strani i “ON” na drugoj strani, pa na koju stranu treba da prevučem? Hoće li prevlačenje prema “OFF” isključiti ga? Ili hoće li prevlačenje prema “ON” isključiti ga?

Kada se korisnik zapita:”Da li opis ukazuje na trenutno stanje ili na radnju koju može izvršiti?” Korisnički interfejs je neuspeo i previše je komplikovan za tako jednostavnu akciju.

Tako, da sam pre par meseci napravio slajder koji rešava problem, postavio sam ga u mom članku pre neki dan [http://www.chrisnorstrom.com/2012/11/one-day-this-is-how-i-will-sell-my-game/].

U suštini, samo dodate prozor slajderu i dozvolite opisu opcije da ostane na jednom mestu, a da ne da se šeta tokom prevlačenja.

Voilà, možda nije toliko vizuelno dobro i minimalistično, ali je mnogo više vizuelno tačno.

  • Slajder sada služi kao stvar koja ističe odabranu opciju.
  • OFF i ON tekst se ne kreću, samo se slajder kreće.
  • Оpis i pozicija slajdera se sada vizelno poklapaju.
  • Sada tačno znate koji su Vaše izbori, zato što nikad nisu skriveni.

I moj prozorski klizač nije samo ograničen na dve opcije...

Loša strana je ta što sve opcije moraju da imaju isti razmak i centriranje, osim ako ne promenite kod i napravite da se širina prozora slajdera menja kada pređete na drugu opciju, npr. ovako:

Ili ako Vam treba više prostora za pisanje samo proširite vertikalno.

Ograničeno je u odnosu na radio dugmad, ali dobija na zaslugama zbog povećavanja spektra korisničkih opcija i mogućnosti biranja samo jedne opcije kao ograničenje.

Naravno, završna obrada, boje:

Ili se držite potpuno bele:

Obično, unutrašnja strana slajdera bi trebalo biti ili svetlija ili tamnija nego element koji sadrži čitav slajder. Ovako:

Ili čak da malo zamutite prozorski slajder:

Ако se poigrate veličinama, fontovima, bojama, senkama i gradijentima siguran sam da možete da napravite da izgleda bolje nego što sam ja napravio.

U svakom slučaju, ovi Windowed Sliders još ne postoje u upotrebljivom obliku. Neki veoma dobri obični slajderi se mogu naći ovde [http://www.larentis.eu/bootstrap_toggle_buttons/]. Kontaktiraću Mattia-u Larentis-a, koji ih je napravio, da proverim da li bi želio da ih prerpavi u prozorsku verziju zasnovanu na mojim modelima, pošto ja nisam dovoljno vešt da ih kodiram sam.

I imamo pobednike!

Ravi Shanker iz Tory Harris Business Solutions-a LINK je napravio verziju na githib-u [https://github.com/torryharris/SliderSwitch]
Sara Soueidan
  je kodirala pravi uzorak koji radi [http://codepen.io/SaraSoueidan/full/AwmzH]

Kritike:

Moj najveći neprijatelj i protivnik, brilijantni i detaljni, Jeroen Ransijn, postovao je veoma dobro napisanu kritiku ovog izuma na [http://scriptkiddie-chronicles.tumblr.com/post/35055426064/the-better-ui-choice-is-actually-worse]. Radujem se budućim bitkama.

Druga rešenja/Implementacije:

 

 

 

Dalji komentari:

Na članku stranice hacker news page: [http://news.ycombinator.com/item?id=4742535]

Licenca i upotreba?

U retkim slučajevima kada sam ja prva osoba koja je ovo izmislila, što veoma sumnjam, zato što nije ništa komplikovano ni brilijantno. Izdaću ovo pod Creative Commons Attribution license. Radite šta hoćete, koristite šta hoćete, komercijalno i lično, raspodeljujte ga, podelite, remiksujte i preradite, stavite ga u svoj korisnički interfejs ili šta god. Slobodan je.

Možda Vam se takođe svidi:

Moj Content-Aware Scrollbar (Moj skrol bar koji prepoznaje sadržaj) [http://www.chrisnorstrom.com/2011/02/creation-introducing-the-content-aware-scrollbar-ui/]