Vynález: Multiple-Choice “Oknami Jazdec” UI

Link: https://chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/

Bolo tam krásne “Zobraziť HN” predloženie [http://news.ycombinator.com/item?id=4594264] na Hacker Správy od niekoho, kto vášnivo dať dohromady naozaj pekné jquery slider plugin. Osoby uvedené v komentároch prečo jazdcov sú hrozné voľbou pre všetkých tých istých dôvodov, našiel som tesne pred tým, ako som sa vysmieval do mojej oknami verziu. Ale jazdec plugin bol vyrobený s takou vášňou, že som musel napísať tento článok a zdieľať svoje objavy. JE tu nádej. Jazdec môže byť stanovená. V skutočnosti to môže byť lepší a robil zvládnuť viac ako 2 možnosti.

[Preklady: Serbo-Croatian od Anja Skrba WebHostingGeeks.com]

Najprv poďme hovoriť o tom, prečo normálne jazdcov sú zlá voľba:

  • Jazdcov viac komplikujú jednoduchá úloha umožňuje užívateľovi zvoliť “Áno / Nie”, “True / False” alebo “Zap / Vyp”. Takmer zakaždým, keď vidím jazdca, používa sa v miestach, kde začiarkavacie políčko by bolo lepšie, menej mätúce UI výber. Políčka sú jednoduchšie a viac známy, jazdcov nie sú.
  • Jazdcov zaberajú viac miesta, ako je začiarkavacie políčko, ktorého on/off štáty sú ľahšie pochopiť.
  • nie je jasné, na ploche používateľov v prípade, že by kliknite na tlačidlo alebo posuňte jazdec do polohy. To, že kliknite na tlačidlo hľadá prepínač sám, alebo kliknite na description vedľa (ja som si vypracovala na tento okamih).
  • Jazdec značky sú nesprávne, pretože výber popisy nie sú statické a sú zahrnuté v jazdca sledovať jazdca sám, ktorý je proste zle. Ste zakrýva a skrýva svoje možnosti používateľa.
  • A napokon, jazdcov samých seba, môžu byť nejednoznačné a nejasné. Aktívne prepínanie sám je na opačnej strane, popis a opis sa nachádza v prepnúť cestu.

Riešením: Stačí použiť políčko.

Avšak, existuje niekoľko krát, keď jazdec je poskytovaná záruka a dokonca aj Lepšiu UI výber:

  • Ak chcete prepínať tam a späť medzi dvoma štátmi, že obaja musia byť popísané, ako jazdec v blogu je ovládací panel s “Publikované | Nepublikované” ako možnosti na článok návrh pracujete na.
  • posuvník na vaše webové stránky, kde členovia môžu zmeniť css štýl z “Tmavé” tematické “Svetlo” tematikou.
  • Ak chcete prepínať medzi uzamknuté a odomknutý štáty obrazovky alebo aplikácie.

Avšak jazdec má chybu…

1

Je prvé zapnutie alebo vypnutie? Je druhý chcete zapnúť alebo vypnúť?

2

Ak ste si zvykli na tento UI je to kus koláča (Prvý vypínač je VYPNUTÝ, pretože to hovorí OFF, popis je popisujúce aktuálny stav spínača), ale mnoho užívateľov odpoveď nie je tak jasné, alebo v bezprostrednom. Najmä keď začnú interakciu s ním.

Problém je 2 rozišli. Začína sa, keď vidí používateľ posuvný prepínač:

3

A je naozaj zlé, keď sa používateľ pokúsi komunikovať s ním:

4

Čo mám robiť?:

  1. Ak kliknem biele tlačidlo pohybuje na ľavej a teraz hovorí, že “ON”, myslím, že je prepínač zapnuté.
  2. Ak kliknem na “OFF” text prepínač bude klesať cez “OFF”, s miestom a reveale “NA” text, myslím, že to znamená, že prechod je teraz preč a mám možnosť ju ZAPNÚŤ kliknutím na novo zjavil “NA” text?
  3. Ak vezmem vypínač a presuňte ho na druhej strane vidím, “OFF” na jednej strane a “O” na druhej strane, tak ktorým smerom mám posuňte ho do? Bude zasunutím smerom “OFF” (vypnúť? Alebo sa zasunutím smerom “NA” vypnúť?

Keď používateľ čuduje sa, “Má description opísať” súčasný stav “alebo” akcie môžem vziať’?” UI zlyhala na prácu a je príliš zložitá na to také jednoduché akcie.

Tak sa o niekoľko mesiacov späť vytvoril som jazdec, ktorý neuvedomil som si, riešiť tieto problémy, len som publikované to deň pred rokmi v mojom článku [http://www.chrisnorstrom.com/2012/11/one-day-this-is-how-i-will-sell-my-game/].

5
V podstate stačí pridať okne jazdca a nechajte opisy voĺby, ak chcete zostať na mieste a NIE pohybovať počas posuvné.

Voilà, možno nie tak vizuálne minimálnu, ale je to oveľa viac vizuálne správne.

6

  • jazdca teraz slúži ako zvýrazňovač zvolenej možnosti.
  • VYPNUTÉ a ZAPNUTÉ, text sa nepohybuje, iba jazdec sám o sebe.
  • Popis a jazdec pozície sú teraz vizuálne uzavreté.
  • Ste presne vedieť, aké sú vaše možnosti obmedzené, pretože sa nikdy skryté.

A môj oknami jazdec nie je obmedzená len na 2 rozhodnutia…

7

Nevýhodou je, že všetky možnosti, mať rovnaké rozmiestnenie a centrovanie, ak ste kód okolo neho, a aby jazdec okná zmeniť šírku ako si snímku cez rôzne možnosti, ako tak:

8

Alebo ak potrebujete viac miesta na písanie popisov stačí ísť vertikálne.

9

Je to obmedzené v tom, koľko sa zmestí, keď v porovnaní s prepínače, ale to výhry vo veci samej, s dôrazom na rozsah a možnosti používateľa a obmedzenie budú môcť vybrať len jednu možnosť.

A samozrejme, leštenie dotyk, farby:

10

Alebo držať s plain white:

12

 

Za normálnych okolností, vo vnútri trať pre jazdca musia byť buď svetlejší alebo tmavší ako prvok, ktorý obsahuje celý jazdca. Ako toto:

13

Alebo dokonca dať oknami jazdca mierne dim:

13

Ak budete hrať s veľkostí písma, farby, tiene, prechody dosť som si istý, že môžete robiť to vyzerať oveľa lepšie, než som.

Niektoré NAOZAJ dobré, normálne jazdcov môžete nájsť tu [http://www.larentis.eu/bootstrap_toggle_buttons/]. Budem kontaktovať Mattia Larentis, výrobca, a pozri sa, či by chceli vidlica ich do oknami verzia založená na mojom mockups ako ja nie som skúsený natoľko, aby kód ich do seba.

A Máme Nejaké Víťazov!

Ravi Shanker z Histórie Harris Business Solutions ODKAZ vytvorili verziu na githib [https://github.com/torryharris/SliderSwitch]
Sara Soueidan
má kódované skutočný pracovný vzorky tu [http://codepen.io/SaraSoueidan/full/AwmzH]

Critisism:

Môj arcinepriateľa a nemesis, geniálny & podrobné, Jeroen Ransijn, publikované dobre napísaný kritiku tento vynález na [http://scriptkiddie-chronicles.tumblr.com/post/35055426064/the-better-ui-choice-is-actually-worse]. Teším sa na naše budúce bitky.

Iné Riešenia/Realizácie:

14

Liam McCabe z PixelsDaily.com

15

Jazdca bez okna

16

Žiadne ďalšie posuvné, len depresívne tab.

17

Udržať popisy mimo trať, buď na ľavej a pravej, alebo nad jazdec sám. Tým, Že Kuba Holuj.

Ďalšie Komentáre:

V tomto článku je hacker noviniek: [http://news.ycombinator.com/item?id=4742535]

Licencie a Použitie?

V mimoriadnom prípade, že som vlastne prvý, kto prišiel s tým, čo som silne pochybujem o tom, pretože je to nič zložité alebo geniálny. Budem vydania tejto časti Creative Commons Attribution license. Robiť, čo chcete, použite ju pre čokoľvek, čo chcete, komerčné a osobné, ho šíriť, zdieľať, remix a prepracovať, patrí do vášho používateľského ROZHRANIA api, alebo čokoľvek. Byť slobodný.

možno aj ako:

18

Môj Content-Aware Posúvač [http://www.chrisnorstrom.com/2011/02/creation-introducing-the-content-aware-scrollbar-ui/]