Tag Archives: design

UX tippek és olvasnivalók

Mióta nagyobb arányban használok kisebb kijelzős és érintőképernyős eszközöket, gyakrabban villan belém a felismerés, hogy a user experience, és a felhasználói felületek valóban barátságos, használható formára tervezése mennyire fontos – lenne. Sajnos azt tapasztalom, hogy számos olyan szoftver van, ahol az ötlet kiváló, de a felhasználói felület teljesen elrontja az élményt, és megy az alkalmazás vagy a website a süllyesztőbe.

Sokakkal beszélgetve arra jutottam, hogy ennek egyik oka természetesen a projektek költségérzékenysége (lásd még unit testelés), a másik, hogy egyszerűen nincs UX designer a fejlesztőcsapatokban. (Ez a két dolog persze összefügg, de nem csak a pénz miatt nincs ilyen szakember a projektekben.) Egyik sem fog egyik napról a másikra megváltozni, így nincs más lehetőség, mint saját erőből megoldani és erre két megoldást látok:

  1. Másolás. Az ötletek másolását általában rossz szemmel nézzük, de a felhasználói élmény terén szerintem ez nem egészen van így. Sőt, ha egy megoldás beválik, elterjed és az ismertsége még jobban megkönnyíti a használhatóságát. Persze az is lehet, hogy nem válik be, vagy még nem bizonyított, de kényszerből elterjed és ezért lesz közismert. Ezt a mintát követik a standardek és az ajánlások. Például az érintőkijelzős eszközöknél a “behúzom az ujjam a széléről” gesztus egyáltalán nem logikus, csak azért próbálkozunk vele, mert arra többnyire történni szokott valami.
  2. A meglévő szakembereink kiokosítása. Na, ez sem zökkenőmentes, mert nem minden programozót lehet rávenni arra, hogy a GUI-val foglalkozzon, de szerencsére akadnak olyanok, akiknek igenis van érzékük hozzá. Őket már csak idővel és forrásokkal kell ellátni. Ambrose Little (az ő nevével a korábbi bejegyzésben említett Infragistics Indigo Studio kapcsán találkozhattunk) blogjában például találhatunk egy UX Book List cikket, ami jó kiindulás lehet.

És ha már kiindulás, íme Ambrose UX for Devs Manifestoja:

  1. A tervezést kezdd az ember irányából.
  2. Hagyj időt a kutatásra.
  3. Ne írj, rajzolj.
  4. Próbálj ki sok variációt, majd egyesítsd a hasznos részleteket.
  5. Tesztelj a felhasználókkal.
  6. Csak akkor kódolj, ha nincs más mód.
  7. Végül ügyelj a részletekre is.

Ti mit gondoltok?

 

Technorati-címkék: ,,

Hivatalos új név a Metro helyett

Mióta a Microsoft augusztus elején dobta a “Metro” elnevezést, nem jelent meg hivatalos közlemény arról, hogy mit használjunk helyette. Közben viszont szép csendben elkezdtek frissülni az MSDN oldalak, ahol tetten érhetjük az új terminológiát:

Metro apps = Windows Store apps

Metro design language = Microsoft design language

Metro style principles = Microsoft design style principles

Ezekbe már valóban nehéz belekötni jogi szempontból.

Van valakinek javaslata a magyar elnevezésekre?

 

Technorati-címkék: ,,,

Photoshop segédlet Windows 8 alkalmazásokhoz

Windows 8 alkalmazások felhasználói felületének megtervezéséhez hasznos lehet az MSDN oldaláról letölthető Photoshop segédlet. Ez a 48 MB-os ZIP fájl egyrészt egy útmutatót tartalmaz a Photoshop beállításához, másrészt van benne 18 mappába rendezve 134 PSD fájl, amit felhasználhatunk a rajzoláshoz.

metro-psd-templates

Nem csak az alap UI elrendezésekhez találunk külön PSD fájlt, hanem az egyes projekt típusokhoz, felugró értesítésekhez, beúszó ablakokhoz, sőt még a vezérlőkhöz is, méghozzá többnyire világos és sötét színvilággal egyaránt.

Letöltés innen: Download design assets for Metro style apps

 

Technorati-címkék: ,,

Megcélzott képernyőfelbontás

A w3schools.com szerint:

“Most computers today have a screen resolution higher than 1024×768 pixels.”

Konkrétan az ő 2012. januári statisztikájuk alapján a böngészők 85.4%-nak 1024×768-nál nagyobb a felbontása.

Néhány általunk üzemeltetett oldalon ez az arány 84-91% között mozog, de ezeknél többnyire műszaki célközönségről van szó.

Ti mostanában mekkora képernyőfelbontásra tervezitek az oldalaitokat?

 

Technorati-címkék: ,

CSSCop

Aki követi az ASP.NET fejlődésével kapcsolatos blogokat, annak Mads Kristensent nem kell bemutatni. Mads a BlogEngine.NET alapítója, a Microsoftnál pedig most már másfél éve a Visual Studio webes editorain dolgozik. A Channel 9-on például megtekinthető egy videó Web Developer Efficiency Tools in Visual Studio 11 címmel, ami abszolút az ő területe.

Ezekből az editor fejlesztésekből a Visual Studio 2010 megjelenése óta több ingyenesen letölthető bővítmény is született, melyek részben Mads neve alatt érhetők el a Visual Studio Gallery-ben. Az egyik kevésbé ismert a CSSCop, ami a CSS Lint ellenőrzőt építi be a Visual Studioba.

Az indítás a StyleCopot, vagy az FxCopot ismerőknek a szokásos. Jobb klikk a projekten, majd Run CSSCop:

CSSCop indítás

Az elemzés eredménye az Error List ablakban jelenik meg:

CSSCop eredmények

Ami viszont kifejezetten szokatlan, az a kivételek kezelése. A CSSCop első indulásakor létrehoz a webhely gyökerében egy csslint.xml fájlt, és abban lehet kikapcsolgatni azokat a szabályokat, amikre nincs szükségünk, sőt van benne egy treatWarningsAsErrors kapcsoló is. Eszembe nem jutott volna itt keresni, de legalább könnyű TFS-be pakolni a beállításokat.

Mint minden automatikus kódelemző esetén, itt is érvényes, hogy ésszel kell kezelni az eredményeket, mert néha nincs igaza. Egyébként “will hurt your feelings”.

 

Technorati-címkék: ,,,

LESS

Weboldalak dizájn részének szerkesztése közben gyakran előjön az az érzés, hogy a CSS bizony egy buta jószág. Sok mindent meg lehet vele csinálni szépen, de kinek nem volt még olyan gondolata, hogy de jó lenne, ha legalább konstansokat tudnánk definiálni vagy egyik osztály örökölhetne beállításokat másik osztálytól?

A CSS ezeket nem tudja, de van más, ami igen, úgy hívják, LESS. A nagy ötlet az benne, hogy nem próbál kitalálni egy teljesen új stílusleíró nyelvet, hanem csak kiegészíti a CSS-t néhány új funkcióval: változókkal, ún. mixinekkel, műveletekkel és egymásba ágyazott szabályokkal. Nem írok ide példákat, a LESS kezdőlapján gyorsan át lehet tekinteni ezeket.

Nyilvánvalóan a böngésző nem tudja értelmezni a .less kiterjesztésű fájlokat, ezért szükséges egy fordítási lépés, melynek során a .less fájlból szabványos .css fájl lesz – erre természetesen van eszköz.

A legszebb az egészben, hogy van .NET-re portolt változata, úgy hívják .LESS (dot-less), ahol ráadásul nincs szükség explicit fordítási lépésre, mert HttpHandlerként tud beépülni az ASP.NET csővezetékbe. Sőt, a handler képes minimalizálni a generált CSS-t és cache fejléceket is be tud rájuk állítani, így csökkentve a hálózati forgalmat és a szerver terhelését. Látszik, hogy olyanok csinálták, akik láttak már valós projektet. A telepítés mindössze web.config szerkesztést igényel.

Készül hozzá Visual Studio integráció is, még az is lehet, hogy a 2010-es változat közvetlenül fogja támogatni, legalább syntax highlight szinten.

 

Technorati-címkék: ,,,

Almás gomb Silverlightban

Nagy fába vágtam a fejszém, amikor szerettem volna valami igazán szépet alkotni Silverlightban, ugyanis a dizájnhoz egyáltalán nem értek. Valahonnan viszont rémlett, hogy az Expression Design tud Photoshopból importálni és XAML-be exportálni, így letöltöttem egy pofás iPhone stílusú gombot a netről .psd formátumban és megpróbáltam .xaml-lé alakítani. Nem sikerült 😦

Szerencsétlen Expression Designnak volt pofája PNG fájlként kimenteni, majd a XAML-be egy Image taget tenni. Noooooormális?

Így nem volt más hátra, nekem kellett rajzolnom. Szerencsére Buck Wilson oldalán találtam egy Photoshop tutorialt, csak ugyanazt kellett Expressionben végigkattintgatnom.

Kezdjük egy keret nélküli, lekerekített négyzettel:

    <Rectangle x:Name="background" Width="180" Height="180" 
RadiusX
="30" RadiusY="30" Fill="#FF0677D5" StrokeThickness="0" />

iPhone_background

Az alsó színátmenethez a háttérre rákerült egy ugyanekkora négyzet, átlátszóba tűnő színátmenettel:

    <Rectangle x:Name="underglow" Width="180" Height="180" 
Stroke
="#FF000000" RadiusX="30" RadiusY="30" StrokeThickness="0"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#00FFFFFF" Offset="0.7"/> <GradientStop Color="#B2FFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>

iPhone_underglowA felső részhez lemásoltam a négyzetet Blendben, majd rárajzoltam egy elliszist és vettem a két objektum metszetét az Intersect menüpont segítségével. Így lett egy alulról íves, felülről lekerekített Path objektumom, amit színátmenettel tudtam kitölteni:

    <Path x:Name="topglare" Height="93.5" Margin="10,10,10,96" 
Stretch
="Fill" Stroke="#FF000000" StrokeThickness="0" Data="..."> <Path.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#B2FFFFFF"/> <GradientStop Color="#4CFFFFFF" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path>iPhone_topglare

Sokat kísérleteztem a szép árnyékkal, végül több körvonallal sikerült megoldani:

    <Canvas x:Name="shadow" Margin="6, 7, 0, 0">
        <Border CornerRadius="30" Canvas.Left="4" Canvas.Top="4" Width="180" Height="180" 
BorderThickness
="1" BorderBrush="Black" Opacity="0.50" /> <Border CornerRadius="31" Canvas.Left="3" Canvas.Top="3" Width="182" Height="182"
BorderThickness
="1" BorderBrush="Black" Opacity="0.40" /> <Border CornerRadius="32" Canvas.Left="2" Canvas.Top="2" Width="184" Height="184"
BorderThickness
="1" BorderBrush="Black" Opacity="0.20" /> <Border CornerRadius="33" Canvas.Left="1" Canvas.Top="1" Width="186" Height="186"
BorderThickness
="1" BorderBrush="Black" Opacity="0.10" /> </Canvas>iPhone_shadow

Ezzel a gomb lényegében elkészült, már csak egy nyilat akartam rárajzolni. Ehhez rajzoltam egy négyzetet, elforgattam 45 fokkal, hogy a sarkán álljon, majd elmetszettem egy négyzettel. Így lett egy csúcsán álló háromszögem, amit csak hozzá kellett ragasztanom egy téglalaphoz és kész is lett a nyilat leíró Path:

    <Path x:Name="arrow" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF0677D5" StrokeThickness="4" 
Data
="..." Height="94.641" Margin="0,25.479,-8.949,79.521"
RenderTransformOrigin
="0.251,0.202"
d
:LayoutOverrides="Height" Width="95" HorizontalAlignment="Right"> <Path.RenderTransform> <TransformGroup> <RotateTransform Angle="45"/> <TranslateTransform X="-43.27" Y="23.665"/> </TransformGroup> </Path.RenderTransform> </Path> iPhone_arrow

A nyíl vastag körvonalat kapott (StrokeThickness=”4”) és olyan körvonal színt, mint a háttér. Ha más színű gombot szeretnék, csak a #FF0677D5 színt kell másikra cserélni.

A tapasztalatom az, hogy ha az ember tudja, mit akar rajzolni, egészen jól lehet az Expression Blendben boldogulni. A generált Path objektumokat viszont fehér ember biztosan nem fogja kódból módosítani Visual Studioban.

Akinek épp ilyen gombra van szüksége, letöltheti a teljes XAML fájlt.