rotten77

Když něco sháním, dívám se často na Aukro.cz, často zde totiž najdu lepší ceny, než na klasických e-shopech - nemám na mysli jen použité věci, ale i nové, se zárukou.

Co se mi ale nelíbí, je stránkování. Na spodní straně stránky totiž najdeme několik prvků, které nám říkají "klikni na mě a dostaneš se na další stránku", kromě samotného prvku, který toto opravdu dělá. Na následujícím obrázku je vidět pořadí prvků, které vás (mě) na první pohled takto upoutají:

1. Nejviditelnější prvek je tlačítko Porovnat. Tady navíc vůbec nemůžu vědět, co tlačítko přesně udělá.
2. Políčko s tlačítkem "jít na stránku". Po kliknutí překliknutí na něj se dostanete zpět na první stránku (pokud nevyplníte číslo stránky), což vás zmate, protože procházíte nabídky od začátku a uvědomíte si to až ve chvíli, kdy jste zpět na spodní straně. Tady už si zase nepamatujete, na které straně jste byli předtím.
3. Samotné stránkování není moc výrazné a umístění tlačítka "další stránka" je matoucí.

Btw, ikonka pro "Nákup pro registrace" se mi zobrazuje jen ve Firefoxu

Přitom by stačilo pár úprav; stránkování přesunout do pravého rohu a zvýraznit tlačítko pro další stránku. Řekl bych, že takto to má většina webů a pro návštěvníky je to tak přirozenější.

Políčko "jdi na stránku" téměř nikdy nepoužívám (nevím jak třeba vy) a tak bych ho umístil vlevo, kde neupoutá tolik pozornosti, ale pokud bych ho použít chtěl, vždycky ho najdu.

Porovnávání předmětů bych méně zvýraznil a změnil text tlačítka. Po najetí kurzorem na tlačítko by se také mohlo vypsat (hoover bublinou), co že se vlastně bude dít a k čemu funkce slouží. Po kliknutí na tlačítko by se zobrazily checkboxy (tak jak je to teď) a na spodní straně prohlížeče by se obrazila plovoucí lišta s tlačítkem "Porovnat". Lišta by byla plovoucí proto, aby když vyberu první dva předměty na stránce, nemusel sjíždět zase dolů.

Možná se mýlím a současné rozvržení je výsledkem nějakého uživatelského testování, mě ale rozhodně nevyhovuje. Co vy, máte na to jiný názor?

Dokončil jsem nový web pro hudební klub Apollo13. Původní plán na spousty funkcí jsem časem zredukoval na absolutní minimum, takže web je teď v podstatě jenom stránka s programem a detailem akce. Spíš jsem se zaměřil na funkce a na to, co by návštěvník webu mohl potřebovat. Odstranilo se fórum a nahradili ho komentáře na stránce s danou akcí - může se tak diskutovat přímo o akci a navíc je možno přidávat vlastní fotky. Na detailu si také můžete nastavit připomenutí (tři dny před koncertem vám přijde e-mail), nebo akci přímo uložit do kalendáře.

Máte blog na Blogger.com a chtěli by jste používat komentáře od Facebooku? Je to jednoduché, stačí malá úprava ve zdrojovém kódu šablony.

Nejdříve si ale nastavte, aby se původní komentáře neozobrazovaly - bylo by zbytečné mít na webu dva formuláře. Komentáře zakážete v Nastavení » Komentáře » Skrýt a Uložte nastavení.

Vložení Facebook kódu

Otevřete si úpravy HTML šablony v nabídce Design » Upravit HTML, zaškrtněte políčko Rozbalit šablony pomůcek.

Teď si v kódu najděte vhodné místo pro vložení komentářů (já je vložil na konec DIV s třídou post-footer - <div class="post-footer">) a vložte následující kód:

1. <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

2. <b:if cond='data:blog.url == data:post.url'>

3. <h3 id='komentare'>Komentáře</h3>

4. <div id='fb-root'/>

5. <fb:comments expr:href='data:post.url' expr:num_posts='10' expr:width='500'/>

6. <b:else/>

7. <p>< a expr:href='data:post.url + &quot;#komentare&quot;'>Komentáře (<fb:comments-count expr:href='data:post.url'/>)</a></p>

8. </b:if>

Na 7. řádku si upravte "< a" na "<a", posterous to jaksi nemůže zkousnout :-)

Popis kódu:

1. řádek - vložení JavaScriptu od Facebooku
2., 6. a 7. řádek - podmínky v jazyce bloggeru - pokud je adresa (data:blog.url) rovna adresa příspěvku (data:post.url), ...
3. nadpis pro komentáře, atribut ID je vyplněn kvůli kotvě, na kterou povede odkaz z výpisu příspěvků
5. Facebook kód, šířku komentářů, nebo další nastavení si zvolte sami
7. odkaz na komentáře ve výpisu příspěvků - zobrazuje i počet komentářů

Jen krátce k třetímu Techspringu v Olomouci, který proběhl minulý týden. Téma přednášek byl UX design, aneb o tom, jak navrhnout digitální produkt. Přednášející, Jiří Sekera a Ondřej Válka, si tak trochu zahráli na "hodnýho a zlýho" policajta. Zatímco Jiří byl ten hodný, který popisoval postupy návrhu a na závěr přidal i několik opravdu dobrých příkladů, Ondřej byl spíše ten zlý a v podstatě nám všem vynadal, že to děláme špatně :-) Takže v krátkosti moje poznámky:

Obecně mi z obou přednášek vyšlo, že návrhem UX se na většině českých projektech ani moc zabývat nemusíme a případnou roli UX designéra zaujme někdo z týmu, kdo má k otmu nejblíž, nebo na to má nejvíc času. O co tedy jde?

Při návrhu produktu by jste neměli zapomínat na vytváření wireframů, prototypů. mockupů a nevím čeho ještě. Na druhou stranu to ale není vždy potřeba. Vždy záleží na rozsahu projektu a vašich možnostech. Důležité je si v dané věci věřit a umět to klientovi "prodat". Vždycky je lepší s klientem mluvit - často vymyslí něco sám a ještě vám za to zaplatí :-)

Výsledný produkt, který vytváříte, by měl být zábava. Uživatelé by jej měli sami chtít používat. Nejlepší je udělat aplikaci, kterou sami uživatelé naplní daty, která pro vás budou v budoucnu hodně cenná.

Pokud navrhujete v aplikaci něco nového, revolučního, nebojte se toho (věříte přeci, že váš produkt je opravdu dobrý). "Dělat revoluci je mnohem snažší, než dělat evoluci". (Kdyby v Apple nevěřili, že telefon bez tlačítek bude pecka, iPhone by asi nevydali).

Nezapomeňte, že "Všichni marketéři jsou lháři".

Obecně o User Experience (Jiří Sekera)

Jak navrhnout digitální produkt (Ondřej Válka)

Logo má každá firma. Google ho má, Apple ho má, Seznam ho má. I vy by jste měli mít nějaké logo. Logo je součástí firemní identity a pomůže vašim zákazníkům rozlišit vaši firmu od ostatních.

Logo vám dnes udělá kde kdo. Od syna vaší sekretářky pro profesionální grafické studio. Na co si ale musíte dávat pozor?

Většina firem nějaké to logo má, když je ale potřeba s logem pracovat (redesign webu, návrh letáků, ...), nejsou schopny ho dodat v potřebném formátu, jednoduše proto, že ho v jiném formátu nemají. O čem je řeč? Podíváme se na nejčastější chyby.

Vektor nebo bitmapa?

Nejčastější chybou, a v mé praxi jsem se s ní setkal asi v 95 % případů je logo v bitmapě - formáty souborů jako BMP, GIF, JPG, PNG. Pokud je bitmapa dostatečné velká a logo jednoduché, není zase takový problém ho do vektorů převést - tady ale můžou vznikat odchylky.

Logo musí být ve vektorech, aby s ním šlo dále pracovat beze ztráty kvality (zvětšování, zmenšování, změna barev).

Formát souboru

Když už někdo má logo ve vektorovém formátu, je to většinou CDR (Corel Draw), nebo AI (Adobe Illustrator). Oba dva tyto programy jsou jakýmsi standardem na poli grafických prací, ale ne každý je ke svému životu potřebuje a ne každý je má k dispozici.

Logo proto musí být v nějakém univerzálním souborovém formátu - tedy PDF, nebo SVG.

Není PDF jako PDF

V jednom případě jsem se také setkal s tím, že klient měl logo v PDF souboru. Ovšem byla to pouze bitmapa vložená do PDF souboru.

Co mi tedy dodavatel musí dodat, abych v budoucnu neměl problém?

Autor loga vám může logo dodat v kolika formátech chce, součástí dodávky ale musí být vektorové logo v souboru PDF nebo SVG. Ověřit, zda je vše tak jak ma být, si můžete například tak, že si otevřete PDF soubor s logem a přiblížíte, třeba 1000x, pokud má logo na okrajích "kostičky" je to špatně.

Pro ukázku přikládám obrázky: nahoře je to správně, dole špatně.

Nedávno jsem chtěl zjistit počty hledání klíčového slova na Seznamu, který je už ale nějakou dobu nezobrazuje (asi tři roky). Stačilo použít uživatelský styl od Marka Prokopa, ten už ale nefunguje (Seznam změnil HTML kód), tak jsem vytvořil vlastní, třeba se bude někomu hodit.

Styl si můžete stáhnout na stránce userstyles.org: Našeptávač Seznam.cz

Kód 

.suggest span {
  visibility: visible !important;
}

Instalace

Opera

1. Uložte si uživatelský skript (soubor s koncovkou .css, obsah souboru je výše uvedený kód) kamkoliv do vašeho počítače
2. Přejděte na stránku Seznam.cz
3. Klikněte pravým tlačítkem myši kamkoliv na stránku (někde, kde není text, odkaz, ani obrázek :-))
4. Zvolte Upravit místní nastavení » Zobrazení
5. Do pole vlastní styl zadejte cestu k vytvořenému CSS souboru

Firefox

1. Nainstaluje si rozšíření Stylish pro Firefox
2. Přejděte na stránku uživatelského skriptu
3. Klikněte na tlačítko Install with Stylish
4. Uživatelský styl můžete vidět na dvou místech:
   1. Zobrazení » Postranní lišta » Stylish
   2. Zobrazení » Styl stránky

Chrome

1. Nainstaluje si rozšíření Stylish pro Chrome
2. Přejděte na stránku uživatelského skriptu
3. Klikněte na tlačítko Install with Stylish
4. Uživatelské skripty teď budete mít po ruce - stačí kliknout na ikonku rozšíření napravo od adresního řádku

Internet Explorer

1. Uložte si uživatelský skript (soubor s koncovkou .css, obsah souboru je výše uvedený kód) kamkoliv do vašeho počítače
2. V hlavním menu zvolte Nástroje » Možnosti Internetu » V záložce Obecné, v části Vzhled » Usnadnění
3. zaškrtněte volbu Formátovat dokumenty pomocí vlastních předloh se styly a vyberte CSS soubor

Uvedený postup jsem testoval v těchto verzích prohlížečů:

• Opera 11.00
• Firefox 3.6.13
• Chrome 10.0.634.0 dev
• Internet Explorer 8.0.6001.18999 

Představte si, že jste ve válce. Vaše pěchota tak nějak funguje, zásobování taky, ve vzduchu máte převahu, ale pořád se nedaří postoupit za obranou linii nepřítele. Chtělo by to podpořit dělostřelectvem. Nepřítel ho má a jeho účinek je vidět na každém kroku. Ale kde takové dělo vzít, když nemáte vlastní zbrojovku? Co takhle oslovit jednoho z vašich spojenců? Ti přece mají automobilku a nějaké to dělo by snad zvládli taky. Na plánování nebo navrhování není čas. Prostě to uděláme tak, jak to má nepřítel. Bude tam hlaveň, zaměřování a zásobník. Během výroby se ještě něco pošteluje a voalá! Máme dělo. Šup s ním na bitevní pole a teď ukážeme nepříteli, kdo je tady pánem.

...a nic. Obsluha děla pořádně neví, jak zamířit, nikdo je to nenaučil. Ono by to stejně bylo k ničemu, protože zaměřovač nezaměřuje a dostřel děla nedosahuje zdaleka takových dálek, jako by měl. Nepřítel má navíc dělo připevněné na opásovaných vozidlech, takže se i v nepřístupném terénu dostane kamkoliv, vy oproti tomu máte dělo postavené na oblíbeném modelu automobilky, který zvládne maximálně dlažební kostky na městském okruhu. No, a na závěr, ruku na srdce; s těmi slepými patronami toho stejně moc nedokážete.

Jasně, blbost. Takhle by to přece nikdo neudělal, nebo ano? Zkusme si malé přirovnání:

Bitevní pole bude internet a dělo vaše webové stránky. Vložili jste do jejich vytvoření vše potřebné? Zamysleli jste se nad tím, jaký účel budou plnit? Sami si je asi kvalitně vytvořit nedokážete, a Franta od vedle, který do těch počítačů taky tak trochu dělá, to taky nemusí zvládnout na výbornou.

Tak si alespoň zahrajte lodě, tady to střílení naslepo má ještě nějaký smysl.