8 اصل تاثیرگذار درباره طراحی سایت که باید بدانید

[hooman_the1]

طرح مسئله

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

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


بدون اینکه چیزی در مورد این دایره ها بدانید نیز به راحتی می توانید آنها را رده بندی کنید . به این اصل ، سلسله مراتب بصری می گویند.قسمت هایی از وب سایتتان از بقیه بخش ها مهم تر هستند ( فرم ها ، دکمه " همین حالا تماس بگیرید " ، بخش "مزیت های ما" و ... ) ، طبیعتا خواسته شما اینست که این بخش ها بیشتر مورد توجه قرار گیرند . اگر بخش منو سایت شما ، 10 آیتم دارد ، آیا اهمیت تمام آنها یکسان است ؟ بیشتر می خواهید کاربر کجا را کلیک کند ؟ لینک های مهم را برجسته تر کنید.سلسله مراتب فقط به اندازه عنصر مورد نظر مربوط نیست . مثلا Amazon دکمه “add to cart” را با استفاده از رنگ ، برجسته کرده :



از هدف کسب و کارتان آغاز کنید

عناصر موجود در وب سایتتان را بر اساس اهمیتشان در کسب و کارتان ، درجه بندی کنید. اگر هدف مشخصی نداشته باشید ، طبعا نمی توانید اولویت بندی کنید.در اینجا برایتان مثالی می آورم ، عکس پایین اسکرین شاتی از سایت William Sonoma است ، هدف آنها فروش ابزار پخت و پز مناسب برای خارج از خانه است.چشمگیرترین عنصر در صفحه ، قطعه بزرگی از گوشت گریل شده است ( ایجاد نیاز ) ، پس از آن عنوان مربوطه ( توضیح در مورد چیستی آن ) و در نهایت دکمه عمل یا action button ( بدست آوردن ) . رده چهارم سلسله مراتب ، پاراگرافی در ذیل عنوان است ، عنصر پنجم بنری با عنوان حمل رایگان و در انتها نیز نویگیشن بالای صفحه است . در این صفحه سلسله مراتب بصری بخوبی انجام شده .


تمرین. وب گردی کنید و با دقت سلسله مراتب بصری در وب سایت ها را بیابید. سپس به سراغ وب سایت خود بروید و ببینید آیا چیزی مهم ( عناصر کلیدی که بینندگان عمدتا بدنبال آنند ) وجود دارد که در بالای سلسله مراتب بصری نباشد ؟ تغییرش دهید.

ادامه دارد ...

منبع : appzweb.ir
طراحی وب سایت در اهواز

[hooman_the1]

اصل 2 : نسبت جادویی

" نسبت طلایی " عدد 1.618 ( عدد فی (ϕ)) است که تمامی عناصر بصری که با این تناسب طراحی شوند زیبایی خاصی پیدا می کنند ( یا حداقل اینطور می گویند ! ) .از سوی دیگر ،" دنباله فیبوناچی " را داریم که که هر عدد در این دنباله بصورت مجموع دو عدد قبلی تعریف می شود : ...0،1،1،2،3،5،8،13،21 . نکته جالب اینجاست که این دو مقوله به ظاهر بی ربط ، عددی یکسان تولید می کند.تصویر زیر ، تجسم بصری نسبت طلایی را نشان میدهد :



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


آیا می توان این نسبت را برای طراحی وب بکار برد ؟ بله ، چرا که نه . بیایید نگاهی به توییتر بیندازیم :


حالا به سراغ کامنتی از مدیر هنری سایت توییتر می رویم :
" برای کسانی که در مورد نسبت های جدید سایت توییتر کنجکاو هستند ، بدانید که این نسبت ها را اتفاقی انتخاب نکرده ایم .
البته این نسبت برای کم عرض ترین حالت UI طراحی شده . اگر پنجره مرورگر شما پهن تر باشد این نسبت از بین می رود . اما با استفاده از پنجره ای با کم ترین عرض می توانید آنچه در فلسفه طراحی ما وجود دارد بخوبی ببینید و آن نسبت طلایی است ."بنابراین اگر عرض محتوی وب سایت شما 960پیکسل است آن را به 1.618 تقسیم کرده که به عدد 593 پیکسل می رسید . در نتیجه عرض قسمت محتوی شما باید 593 پیکسل و عرض سایدبارتان 367 پیکسل باشد . اگر ارتفاع صفحه 760 پیکسل است ، می توانید برای زیبایی بیشتر آن را به دو زیرمجموعه 470 پیکسلی و 290 پیکسلی تقسیم کنید ( 760 تقسیم بر 1.618 برابر است با 470 ) .

ادامه دارد ...

منبع : appzweb.ir

طراحی وب سایت در اهواز

[hooman_the1]

اصل 3 : قانون هیک

اصل هیک می گوید که با اضافه کردن هر انتخاب جدید ، زمان برای اخذ تصمیم افزایش می یابد.
این موضوع را بارها و بارها در رستوران ها تجربه کرده اید . برای انتخب غذا از منو های پرو پیمان ، کار سختی پیش رو دارید .اما اگر بعنوان غذای اصلی فقط دو انتخاب پیش رو داشته باشید کارتان بسیار ساده تر می شود. این موضوع دقیقا مطابق با اصل " پارادوکس انتخاب " است ، هرچه انتخاب بیشتری به افراد بدهید ، راه را برای انتخاب " هیچکدام " بازتر می کنید .
( **** به شدت به همه دوستان توصیه می کنم به سراغ کتاب The paradox of choice از دکتر Barry Schwartz مراجعه کنید . هم برای توضیح این اصل و هم برای بهداشت روانی در این عصر **** )
هرچقدر کاربران هنگام استفاده از وب سایتتان ، انتخاب های بیشتری داشته باشند ، انتخاب برایشان سخت تر می شود ( البته اگر کلا بی خیال انتخاب نشوند ) . پس برای خلق یک تجربه دوست داشتنی برای کاربرانتان ، گزینه های غیر ضرور را حذف کنید . برای یک طراحی حرفه ای ، پروسه حذف گزینه های زائد باید در تمام طول طراحی وجود داشته باشد .
در زمانه ای با انتخاب های نامحدود ، افراد نیاز به فیلترهای بهتری دارند ! اگر سبد کالاهایی که عرضه می کنید خیلی پر و پیمان است ، برای راحتی کاربران در انتخاب از فیلترهای بهتر استفاده کنید.
Wine Library وب سایتی است که تعداد زیادی انواع نوشیدنی می فروشد. آنها در استفاده از فیلتر ها بسیار خوب عمل می کنند ( در قسمت چپ ) :

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

اصل 4 : قانون فیت

قانون فیت تصریح می کند که زمان لازم برای حرکت به سوی یک منطقه هدف ( مانند کلیک بر روی یک کمه ) تابعی است از فاصله و اندازه آن هدف . به بیان دیگر ، هرچه شیء بزرگتر و نزدیکتر باشد ، استفاده از آن آسانتر است .
Spotify دکمه play را بصورتی طراحی کرده که استفاده از آن برای کاربران از دیگر دکمه ها آسانتر است :



طراحان این سایت ( در برنامه نسخه دسکتاپ ) این دکمه را در گوشه چپ پایین صفحه قرار دادند که بعنوان در دسترس ترین ناحیه در یک صفحه شناخته میشود زیرا اصولا گوشه ها در طراحی برنامه های دسکتاپ بهترین نقاط برای دسترسی شناخته می شوند . البته این اصل بدلیل اسکرولینگ در مورد طراحی وب صادق نیست .
البته این اصل بدان معنی نیست که بزرگتر همیشه بهتر است . طراحی دکمه ای که نصف صفحه را اشغال می کند ، ایده خوبی نیست ، و البته اثبات این موضوع نیاز به تحقیقات علمی ندارد . دقت کنید که اصل فیت بصورت لگاریتمی عمل می کند و این بدان معناست که نتایج به نسبت فاکتور های اندازه و فاصله بر روی یک منحنی است نه روی یک خط صاف ( نسبت نتیجه به عوامل خطی نیست ) .
یک دکمه کوچک با افزایش اندازه ای 20 درصدی ، افزایش محسوسی در قابلیت استفاده تجربه می کند در صورتی که یک شیء خیلی بزرگ با همان درصد افزایش سایز ، به چنین نتیجه ای دست پیدا نمی کند .
این موضوع شبیه به قانون اندازه هدف است .
اندازه یک دکمه باید متناسب با پیش بینی ما از تناوب استفاده از آن طراحی شود . هنگام طراحی بر اساس تحلیل هایتان ، دکمه های پر کاربرد را بزرگتر طراحی کنید تا استفاده از آن ها راحت تر باشد.
تصور کنید که یک فرم طراحی کرده اید که کاربر باید آن را پر کند ، در پایان فرم دو دکمه “submit “ و “reset” تعبیه کرده اید



99.99999% از کاربران دکمه submit را می زنند . بنابراین باید آن را بزرگتر طراحی کنید.

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

اصل 5 : قانون سومی ها

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



ادامه دارد ...



منبع :appzweb.ir

[hooman_the1]

اصل 6 : قوانین طراحی گشتالت

گشتالت ، تئوری ذهن و فکر است و بر این اساس است که چشم انسان قبل از دیدن جزییات به نمای کلی توجه می کند. منظور من شکل زیر است :


توجه کنید که در نگاه اول یک سگ را دیدید بدون اینکه بر روی نواحی سیاه رنگی که سگ از آنان تشکیل شده تمرکز کنید.
نکته کلیدی این نظریه اینست که افراد ، کلیت آبجکت را قبل از اجزاء می بینند . کاربران ابتدا نمای کلی وب سایت شما را می بینند قبل از اینکه هدر ، منو ، فوتر و چیزهای دیگر را تمایز دهند . Kurt Koffka یکی از بزرگان و پایه گذاران گشتالیسم می گوید : " کلیت آبجکت مستقل از اجزائش ، وجود دارد " .
تئوری گشتالت با 8 قانون ، چگونگی درک افراد از چیزی که می بینند را توضیح می دهد . این قوانین عبارتند از :

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

1.قانون مجاورت

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

سایت Craiglist از این قانون برای برای راحت کردن کاربینندگان در تشخیص ساب منو های مربوط به منو For sale استفاده کرده.

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

2. قانون شباهت

افراد آبجکت های شبیه به هم را در یک گروه قرار می دهند . این شباهت می تواند در زمینه شکل ، رنگ ، سایه و چیزهای دیگر باشد .
در شکل زیر ، ذهن بیننده نقاط سفید را در یک گروه و سیاه ها را نیز بدلیل شباهت ظاهری در گروهی دیگر قرار می دهد :
سایت Codeschool تمامی متن های گواهی (testimonial box) را شبیه به هم ساخته ، تا بتوان آنها را یک گروه دانست :

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

3.قانون بسته شدن

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

استفاده از قانون بسته شدن باعث می شود لوگو ها یا عناصر طراحی خیلی جذاب شوند . مثالی جالب در این رابطه توسط Sir Peter Scott برای صندوق جهانی طبیعت در سال 1961 طراحی شده :

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

4. قانون تقارن

مغز ، تمایل دارد اجسام را بصورت متقارن حول یک نقطه تصور کند . برای ایجاد تصاویر دلپذیر ، یکی از تکنیک ها ایجاد آن با استفاده از اجزاء زوج ( 2 ، 4 ، 6 ...) است .
مغز وقتی دو آبجکت متقارن را که به هم متصل نیستند می بیند ، به صورت طبیعی متمایل است که آن را بصورت یک شکل منسجم و متصل تصور کند .


هنگامی که به شکل بالا نگاه می کنیم ، مغز تمایل دارد ، 3 جفت براکت متقارن ببیند به جای اینکه این شکل را بصورت 6 براکت جدا از هم تصور کند .

ذهن افراد اشکال متقارن را به غیرمتقارن ترجیح می دهد . در شکل زیر ، 3 ستون متوازن و یک منحنی ، به زیبایی طراحی سایت BootB افزوده :

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

5. قانون سرنوشت مشترک

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



افراد بصورت ذاتی تمایل دارند دست ها و یا میله هایی که به سمت خاصی متمایل شده اند را در یک گروه قرار دهند ، چون آنها به یک جهت اشاره دارند . شما می توانید از این اصل برای هدایت کاربران به هدفتان ( مانند فرم ثبت نام ، دکمه خاصی و ... ) استفاده کنید .

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

6. قانون تداوم

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



وب سایت Fixel این قانون را در متصل کردن شکل افراد به توضیحاتشان بکار برده :



چندین قانون دیگر گشتالت نیز وجود دارد از جمله "شکل و زمینه" یا "قانون گشتالت خوب" ( مغز تمایل دارد که آبجکت ها را در صورتی که الگویی معمول ، ساده ومنظم را تشکیل دهند در یک گروه قرار دهد – مانند حلقه های المپیک ) ، اما بنظر میرسد قوانین گفته شده ، برای کار ما کافی است .

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

اصل 7 : فضای سفید و طراحی پاکیزه

فضای سفید ( که فضای منفی نیز گفته می شود ) جزیی از قسمت خالی صفحه است . این قسمت فضای میان گرافیک ها ، مارجین ها ، فضاهای میان ستون ها ، فضاهای میان خط ها و دیگر عناصر بصری می باشد .
این عنصر ، صرفا نباید به عنوان فضای " خالی " در نظر گرفته شود ، بلکه آن عنصری مهم در طراحی است که می تواند باعث شود آبجکت های درونشان بخوبی مشخص باشند . فضای سفید ، یکی از اجزاء سلسله مراتب در وب سایت است .
یک صفحه بدون فضای سفید ، بسیار شلوغ و درهم ریخته و پر از متن و شکل اعصاب خرد کن است که خواندن آن زجرآور است که کاربران حتی زحمت خواندن آن را نیز به خود نمی دهند . به همین دلیل است که از لحاظ روان شناسی وب سایت های ساده تر ، تاثیرگزار تر هستند .
فضای سفید کافی وب سایت به کاربر حس تمیزی را القاء می کند. طراحی پاکیزه سفید برای انتقال یک پیام روشن ضروریست ، فضای سفید به معنای محتویات کمتر نیست بلکه به معنی استفاده صحیح و بهینه از فضای صفحه است . برای اجراء یک طراحی پاکیزه ، باید در استفاده درست از فضای سفید برای انتقال صحیح پیام خبره شوید .
Made.com بخوبی این کار را انجام داده :




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

ادامه دارد ...

منبع :appzweb.ir

[hooman_the1]

اصل 8 : تیغ اُکام

اصل تیغ اکام بیان می دارد که در انتخاب میان فرضیه ها ، آن که کمترین پیش فرض و درنتیجه ساده ترین توضیح را ارائه می دهد برنده است . این اصل در طراحی این گونه بیان می شود که معمولا بهترین راه حل ساده ترین راه حل است .تیم Pipedrive در پستی در باره تجربه شان در مورد Anglepad می گویند :
" افراد تیم انجل پد و مدیرانشان در چند زمینه ما را حیرت زده کردند . آنها گفتند ‘ کلی آیتم در هوم پیج تان وجود دارد ‘ که در ابتدا با این نصیحت موافق نبودیم ، اما پس از تجربه اش کلی تعجب کردیم ، بر اساس حرف آنها 80% آیتم ها را حذف کردیم و فقط یک دکمه ثبت نام و یک لینک بیشتر بدانیم را به جا گذاشتیم . نتایج حیرت انگیز بود ، ثبت نام کنندگان 3 برابر شدند."



این تئوری فقط در مورد نتایج بصری نیست بلکه در مورد عملکرد هم صادق است . بعضی بنگاهها – مانند 37Signals – سادگی را به یک مدل کسب و کار تبدیل کرده اند. در این پاراگراف از کتاب Rework که نویسنده اش یکی از موسسان این کمپانی است آمده :
" خیلی از افراد از اینکه محصولاتمان از رقباء کارایی کمتری دارند از ما متنفرند . آنها ، بابت اینکه محصولاتمان شامل حال آنها نمی شود ، ما را محکوم می کنند .اما ما بابت قابلیت هایی که محصولاتمان ندارند به اندازه قابلیت هایی که دارند افتخار می کنیم . ما محصولاتمان را ساده طراحی می کنیم زیرا اعتقاد داریم نرم افزارها خیلی پیچیده طراحی می شوند : ویژگی های فراوان ، دکمه های زیاد و درنتیجه گیج شدن های پی در پی ."
طراحی مختصر و ساده همیشه به معنای طراحی کاربردی و موثر نیست . اما بر اساس تجربیات من ، سادگی همیشه از پیچیدگی موثر تر است و به همین دلیل است که همیشه در تلاش برای ساده تر کردن طراحی هستم.

خلاصه

طراحی وب موثر و طراحی هنری یکی نیست .
شما در طراحی سایت باید اهداف تجاریتان را در نظر گرفته و برای کاربران طراحی کنید . اصول گفته شده ، به شما در طراحی زیبا که اهداف مالیتان را نیز براورده کند کمک شایانی می کند.

پایان

منبع :appzweb.ir