۷ تکنیک برتر گرافیکی برای فروشگاه اینترنتی شما

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

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

رفتار مؤثر خود را بر خریداران ببینید، که به نوبه خود تصمیمات خرید خود را تحت تأثیر نفوذ شما قرار می‌دهند. و شما را از یک طراح تجارت الکترونیک فراتر می‌برد و به یک فروشنده تبدیل می‌کند. با یک تفاوت عمده که تکنیک‌های فروش شما بسیار زیرکانه کاربر را ترغیب به خرید کالا می‌کند.

در اینجا ما ۷ روش استفاده از بهترین مدل‌های طراحی بصری تجارت الکترونیک را با شما به اشتراک می‌گذاریم. تا از آن برای جلب توجه مشتریان خود استفاده کنید.

۱/ کنتراست رنگی

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

اما این روش با توجه به محدودیت شما در استفاده از رنگ‌های تجاری یک برند همیشگی و کاربردی نیست. برای دریافت کامل اثر یک رنگ شما نیاز به استفاده از هم خانواده و یا مکمل‌های رنگی دارید.

رنگ‌هایی که مکمل هم هستند - مثل سایه‌های متفاوت از یک طیف رنگ یا رنگ‌های متعلق به یک چرخه رنگ - جالب هستند ولی جلب توجه نمی‌کنند.

این اعمال برای المان‌های پایین یا انتهایی آثار گرافیکی (بصری) بهترین انتخاب هستند. به عنوان مثال رنگ نوشته‌های روی رنگ زمینه مناسب بهتر نشان داده می‌شود

هر جفت از رنگ‌های رو به روی هم در چرخه رنگی (که به عنوان رنگ مکمل شناخته می‌شوند) از نظر رنگی تضاد رنگی ایده آلی ایجاد می‌کنند. و برای دکمه‌هایی که می‌خواهید دیده شوند می‌توانید از این دسته مکمل‌های رنگی استفاده کنید. همان‌طور که پیش‌تر اشاره شد مانند دکمه‌های call to action.

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

۲/ بازی با حجم

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

برای طراحی وب سایت‌های تجارت الکترونیک، اندازه‌ها بهترین استفاده را در تصاویر و متون صفحه اصلی دارا هستند. صفحات Landing معمولاً با اتکا بر یک تصویر بزرگ و تسلط متمرکز برای فروش و یا یک محصول ارتقاء یافته می‌باشد. مثل یک تصویر از یک محصول برجسته، و یا متون تبلیغاتی با سایزهای بزرگ و BOLD.

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

بدیهی است که عناصر کم اهمیت‌تر مانند بیانیه‌های سلب مسئولیت حقوقی باید کوچک‌ترین عناصر بصری بر روی صفحه نمایش باشند.

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

با توجه به اهداف توسعه هزاره تبلیغات ۶۷ درصد از خریداران کیفیت تصویر را در نظر می‌گیرند که بسیار مهم است. تصاویر با کیفیت بالا و فاش کردن جزئیات تصویری مانند بافت به مشتریان یک مفهوم را القا می‌کند و آن ارائه محصولی با کیفیت و قابل لمس در زندگی واقعی می‌باشد. در این مفاهیم می‌توان به این نکته دست یافت که اختصاص فضای کافی برای تصاویر محصول رابطه مستقیمی بر افزایش فروش خواهد داشت.

۳/ فضای منفی فراوان

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

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

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

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

۴/ استفاده از الگوهای اسکن

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

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

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

در گوشه سمت راست، الگوها متفاوت است.

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