طراحی مجدد Sourceforge

Sourceforge وب سایتی است که به توسعه دهندگان اجازه میدهد نرم افزارهای خودشان را در آنجا با رعایت قوانین نرم افزاری قرار دهند. در سورس فورج نرم افزارهای معروف زیادی میزبانی می شود از جمله:Emule, Notepad++, SMPlayer

توسعه دهندگان در آنجا میتوانند برای نرم افزار خودشان یک پروفایل مجزا ایجاد کنند و امکاناتی از قبیل تعداد دفعات دانلود، بحث هایی راجع به نرم افزارشان و یا روند توسعه و رفع ایرادهای آنها را ثبت کنند.

سورس فورج کاربران زیادی دارد که از آن استفاده میکنند اما مشکلاتی که آنها با وب سایت اصلی داشتند مشکلاتی از قبیل هدایت کاربر، شمایل قدیمی طراحی آن بود. اخیراً تیم سورس فورج اقدام به طراحی مجدد وب سایت اصلی خودشان کردند. در عکس زیر صفحه اصلی را مشاهده کنید:

صفحه اصلی سورس فورج کاربر پسند تر شده است. یک فرم جستجوی برجسته و واضح، دسته بندی های درشت و تفکیک شده، لیست پروژه های محبوب و دیگر امکاناتی که در صفحه قرار گرفته بصورت ساده و تمیز و در درسترس برای کاربر قرار گرفته است. در طراحی جدید سورس فورج سعی شده با ایجاد فضای سفید بیشتری و بزرگ کردن سایز عناصری که قرار است کاربر بر روی آنها کلیک کند، احساس آزادی عمل بیشتری به کاربر دهد. این کار سبب خوشنودی کاربر میشود.

تغییرات دیگری هم در این سایت مشاهده میشود، بدین صورت که در صفحه هر کدام از پروژه ها کاربر میتواند براحتی نرم افزار را دانلود کند. با قرار دادن دکمه برجسته و واضح دانلود، کاربر براحتی به هدف نهایی خود یعنی دانلود نرم افزار میرسد.

توسعه دهندگان همچنان میتوانند صفحه اصلی وب سایت را به صفحه اصلی پروژه خودشان تغییر دهند. طراحتاً میتوان گفت هدایت کاربر وب سایت جدید سورس فورج آسان دارد.

یک ارائه درباره تجارب کاربری User Experiences

ارائه دهنده Rajesh Lal

User Experience

درباره تیم کلین و فعالیت ها

متاسفانه طی 10 روز گذشته فرصت به روز کردن این وبلاگ گروهی که توسط من ( پرهام ) و نیما راه اندازی شد و پس از اون فرشاد هم به تیم ما پیوست بنا به دلایلی نبوده , یکی از این دلایل این بوده است که ما در حال ساماندهی مطالب و موضوعات هستیم , با توجه به اینکه مسائلی مانند User Experience و Usability و User Interface Design برای نخستین بار پرداخته میشه در حال برنامه ریزی هستیم تا بتونیم با مطالب منظم و دنباله دار تری در خدمت شما باشیم .

همچنین مشغول سایر سایتهای وابسته هم هستیم تا بتونیم اطلاعات بدون نقضی را به شما ارائه کنیم , پوزش ما را پذیرا باشید ولی من از طرف تیم این قول را میدم که این تاخیر در به روز رسانی را به بهترین نحو جبران کنیم و با خبرها و فعالیت های دیگر شما را دلگرم به تلاش در این زمینه کنیم :)

پس تا چند روز آینده که بیش از 4 روز نخواهد بود

سادگی در طراحی وب سایت

طراحی وب سایت یکی از سخت ترین کارها است! چون یک طراح سایت باید در زمینه های مختلفی آگاهی داشته باشد. وب سایت وسیله ای است که مردم از سراسر دنیا با فرهنگ، زبان، عقیده، سطح دانشهای مختلف به آن دسترسی دارند، حال چگونه می توان این بازدید را برای این قشر عظیم آسان کرد و با آنها به راحتی ارتباط برقرار کرد ؟

شما سایتهای مختلفی را در اینترنت دیده اید که مطالب و محتویات زیادی دارند، اجزای گرافیکی زیاد، صدا، انیمیشن و... وقتی شما وارد این سایت می شوید اگر هم خیلی به اینترنت آشنا باشید مدتی طول می کشد تا بفهمید که این سایت چه هدفی را دنبال می کند و می خواهد چه چیزی را نشان بدهد چه برسد به کاربرانی که آشنایی زیادی با اینترنت و کامپیوتر ندارند ! برای آنها خیلی سخت خواهد بود که بفهمند که از کجا باید شروع کنند به کجا میتوانند بروند و مهمتر از همه اینکه این سایت درباره چیست ؟!

مشکل این سایتها در یک کلمه خلاصه می شود "پیچیدگی" و راه حل ساده آن هم یک کلمه است : سادگی !

اما چگونه ؟

بگذارید با یک مثال شروع کنم، به وب سایت فایرفاکس بروید. چی می بینید ؟ آیا می توانید به راحتی بفهمید این سایت درباره چیست ؟ آیا می توانید به راحتی آن چیزی را که می خواهید پیدا کنید ؟ فکر می کنم جواب شما بله باشد ! حتی کاربرانی که خیلی سطح دانش کامپیوتر و اینترنت آنها بالا نیست به راحتی در این سایت به هدف و مقصود خود می رسند.

اما چرا ؟ جواب ساده است : سادگی !

قسمت navigation جدا و به راحتی قابل تشخیص است، توضیحات سایت کم و در عین حال مفید و مفهوم است، دکمه download مجزا و به راحتی دیده می شود...

و برای آن سایتهای پیچیده مطمئنا شما مثالهای زیادی در ذهن دارید !

بنابراین اگر شما یک طراح وب سایت هستید حتما این نکته را موقع طراحی به یاد داشته باشید، سادگی یک کلید طلایی در طراحی وب سایت است. همیشه سعی کنید هدف وب سایت را در جملات کوتاه و با معنی ارائه دهید، با کاربران رو راست باشید، آنها را سردرگم نکنید و مجبورشان نکنید که درباره هدف وب سایت شما به جستجو بپردازند، اگر این کار را بکنید به احتمال زیاد آنها را از دست می دهید. کاربران معمولا برای خواندن متون طولانی صبور نیستند، آنهم روی صفحه مونیتور !

سادگی به نظر آسان می آید ولی استفاده از آن خیلی سخت است ! شما باید سعی کنید با کاربران به سادگی و به سرعت ارتباط برقرار کنید، واقعا سخت است ! با این حجم از اطلاعات که هر دقیقه وارد اینترنت می شود خیلی سخت است که کاربران را جذب کنید !

در پستهای بعدی بیشتر در مورد سادگی در طراحی وب سایت مینویسم.

سایتهای پر زرق و برق کاربران را اذیت می کند !

شاید خیلی از کاربران و طراحان وب سایت با من مخالف باشند، من همیشه موافق سادگی در طراحی وب سایت بوده ام اما ممکنه خیلیها این کار رو در طراحی وب سایت رعایت نکنن، استفاده از Popup ها، اجزای Javascript که بعضی وقتها واقعا حرفی برای گفتن ندارن، اجزای فلش و گرافیکی که ربطی به سایت نداره و فقط موجب میشه که چشم کاربر به دنبال اونا بره و آخرش هم حرف خاصی رو به کاربر نمیگه و ...

مطلبی در همین مورد سایت vnuent.com نوشته که ترجمشو براتون میذارم :

شرکت SDL Tridion که در زمینه مدیریت محتوی وب فعالیت می کند نتایج تحقیقی را در مورد بیشترین عوامل دور شدن یک کاربر از یک وب سایت را منتشر کرد، که بیشترین عامل مربوط به تبلیغات Popup بوده است.

78 درصد پاسخگویان به این نکته اشاره کرده اند که این نوع تبلیغات بیهوده ترین تجربه آنها در دنیای وب بوده است، تبلیغاتی که در نامناسب ترین زمان می آیند و راحت شدن از دست آنها هم سخت است.

این شرکت بیان کرد که این نوع از آزردگی ناشی از چیزی است که به آن "طراحی Bimbo" گفته می شود که در آن سایتها جذاب هستند ولی مفهوم و دوام ندارند !

Erik Aeyelts Averink، رئیس شرکت SDL Tridion گفت :"اولین برخورد ها همیشه مهم هستند، شرکتها نمی خواهند سایتهای Bimbo داشته باشند." او ادامه داد : "همه زرق و برق ها و بی محتواییها کاربر را عصبی می کند. سعی نکنید کاربر را بدون دلیل و به راحتی از دست بدهید."

موارد دیگر شامل استفاده از معرفیهای طولانی در وب سایتها که نمی شود از آنها چشم پوشی کرد، نیاز به نصب برنامه های اضافی برای مشاهده کردن سایت و وارد کردن اطلاعات شخصی زیاد از حد برای استفاده کردن از یک سایت می باشد.

او اضافه کرد : "شرکتها باید مطمئن باشند که کاربران را منحرف نمی کنند. اینترنت معمولا اولین مکان برای تحقیق کردن می باشد و به وب سایتها هم همچون موارد دیگر بازاریابی باید توجه کرد و برای آنها وقت گذاشت. اگر شرکتها به این روش ادامه دهند آنها نه تنها مشتریان خود را از دست می دهند بلکه شهرت آنها هم از بین می رود."

منبع : vnunet.com

میزان خوانایی فونت ها در صفحات وب

از مواردی که در طراحی صفحات وب و نمایش صفحات بسیار حائز اهمیت می باشد نوع فونت و اندازه فونت هست که باعث میشود تا کاربر دچار خستگی نگردد .

به طور کلی فونت ها به دو دسته Serif و Sans-Serif تقسیم میگردند .
تقسیم بندی فونت های Serif و Sans-Serif برای فونت های لاتین هستند , به طور مثال در فونت های لاتین فونت هایی نظیر Arial در دسسته بندی فونت های Sans-serif قرار میگیرند ولی فونت Arial در زبان های RTL مانند فارسی در دسته بندی فونت های Serif قرار میگیرند و به همین دلیل برخی از مواردی که در مورد اندازه و نوع فونت ها در لاتین بیان میگردد در فارسی صدق نمیکند .
برای آگاهی بیشتر در مورد تفاوت این دو فونت هستند را در تصویر زیر می توانید مشاهده کنید .


یک نظریه در مورد نوع فونت ها وجود دارد که گفته میشه فونت های Sans-Serif برای مانیتور مناسب بوده که کاربر در صورتی که بیش از اندازه به مانیتور خیره گردد دچار خستگی میشود و فونت های Serif . برای متون چاپی که کاربر نیاز دارد تا با چشم کلمات را دنبال کند پس بهترین فونت برای متون در صفحات وب فونت های Sans-Serif می باشند .
( این تغییر را در طراحی مجدد بی بی سی می توانید مشاهده کنید )
به تصویر زیر که نمونه ای از پیمایش چشم در فونت های Sans-Serif هست نگاه کنید
اما موضوعی که در ادامه بهش میپردازیم در مورد اندازه فونت ها برای صفحات وب هستند , در مورد اندازه فونت ها در صفحات وب هستند فونت های Tahoma و Times New Roman که دو فونت مورد استفاده زیاد در وب هستند را در سایزهای 8 و 9 و 10 و 12 و 14 برای متون لاتین و فارسی در تصویر زیر ایجاد کردم تا تفاوت این فونتها را ببینید , می بینید که در نوشته های لاتین در سایز 8 و 9 فونت های Serif اصلا خوانایی مناسبی ندارند و سایز 10 به بالا دارای خوانایی مناسبی هستند , ولی فونت های Sans-Serif مانند Tahoma در اندازه های 8 و 9 نیز قابل مشاهده هستند .

این موضوع در متون فارسی 1 سایز بیشتر هستند و فونت های Sans-Serif سایز 9 و در فونت های Serif سایز 12 دارای خوانایی مناسبی هستند .

پیشنهاد میشه برای متون فارسی از فونت هایی مانند Tahoma استفاده کنید تا برای مطالعه چشم کاربر دچار خستگی نشود .
پی نوشت: در حال انجام یک Usability Testing هستم که در مورد خوانایی و میزان استفاده از فونت ها در صفحات وب هست و تا هفته ی آینده نتایج تحقیق را توی همین وبلاگ منتشر میکنم .

استفاده از فضای سفید و ارتباط بین عناصر صفحه

یکی از مهمترین ابزارها در جعبه ابزار یک طراح فضای سفید است. فضای سفید فقط برای این است که فضایی بین محتوی مختلف در صفحه ایجاد کند مانند: عنوان ها، سر صفحه، پاراگراف ها، دکمه ها و ... . این فضا به ما کمک میکند تا بتوانیم عناصر در صفحه را تفکیک کنیم و آنها را به ترتیب مهم بودنشان قرار دهیم و همینطور آنها را به چندین گروه در صفحه بر اساس در دسترس قرار گرفتشان برای کاربر از هم جدا کنیم.

اگر تا کنون به این مقوله رسیدگی نکرده اید بهتر است فکری برای فضای سفید وب سایت خودتان کنید و به آن رسیدگی کنید. در اینجا بخشی از اطلاعات یک صفحه را میبینید:

آیا می توانید به راحتی عنوان و متن هر پاراگراف را تفکیک کنید؟ با نگاه اول بدلیل نزدیک بودن پاراگراف ها تقریبا جدا پذیر نیستند و کاربر هنگام خواندن خط اول از پاراگراف دوم آن را با خط آخر از پاراگراف بالایی اشتباه می گیرد و باید دقت بیشتری برای خواندن این متن داشته باشد. در این صورت متن هر چقدر هم با اهمیت باشد بخاطر کاربر پسند نبودنش کاربر به سختی زیاد قادر به خواندنش خواهد بود و یا به سرعت از خواندن آن صرف نظر میکند.

در این قسمت با ایجاد فضای سفید بین هر موضوع، تفکیک پاراگراف ها از یکدیگر و فاصله ای که بین عنوان موضوع با محتوی آن پاراگراف ایجاد شده، خواندن را برای کاربر ساده تر کرده و کاربر با دقت بسیار کمی قادر به تفکیک موضوع ها از یکدیگر است و میتواند آن ها به سهولت بخواند:

در صورتیکه این تفکیک بین موضوع ها هم کامل نباشد، نسبت به نسخه قبلی بهتر شده است و برای کاربر قابل استفاده تر شده است. با افزایش فضای سفید بین موضوع ها، آنها را از زنجیر وار بودنشان در آوردیم و به صورت جداگانه هر موضوع با عنوان خود تفکیک شد. البته فضایی که بین هر موضوع ایجاد شده با میزان فضای عنوان مربوط با پاراگراف برای تفکیک محتوی در دید کلی بیشتر است.

به وضوح مشخص میشود پیوند بین محتوی در صفحه وب شما در عین استفاده از فضای سفید بسیار مهم است. بازدید کنندگان شما کم حوصله هستند و با یک نگاه دوست دارند همه عناصر صفحه را ببینند و براحتی به آنها دسترسی داشته باشند. آنها نیاز به یک رابط کاربری تمیز دارند، با ایجاد فضای سفید ارتباط بین اجزا را طوری انجام دهید که کار کردن با وب سایت برای بازدید کننده راحت باشد.