نحوه استفاده از سلسله مراتب بصری در طراحی سایت

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

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

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

نحوه تعامل بین بازاریابان و طراحان در طراحی سایت

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

Crello می باشد این نرم افزار رایگان می باشد و استفاده از آن بسیار ساده است . یکی دیگر از نرم افزار ها که می تواند یک زبان مشترک بین طراحان و بازاریاب ها در ایجاد یک ویدئو در سایت شود نرم افزار Magisto می باشد این نرم افزار کمک می کند تا بازاریاب ها و طراحان نظرات خود را از این طریق به همدیگر ارائه دهند و باعث ایجاد یک ویدئو کامل و جامع از نظرات و گرافیک زیبا شود . 

نمونه های زیبا از طراحی کد مدیا پلیر در سایت

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

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

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

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

ابزار بهینه سازی تصویر و نکاتی برای مدیران سایت ها

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

ما برخی از معروف ترین سایت ها در ای زمینه را خواهیم پرداخت . اولین سایتی که بررسی می کنیم سایت Compressor.io می باشد این ابزار رایگان که توسط Stephane Lyver ایجاد شده است اجازه می دهد هر شخصی از کامپیوتر خود تصاویر مورد نظر را بر روی سایت آپلود کرده و بعد از آن تصاویر بهینه و فشرده شده را دانلود نماید این سایت به کاربر خود می گوید تا چه اندازه توانسته است تصاویر را بدون افت کیفیت تصویر بهینه نماید همچنین قسمتی لغزنده به کاربران داده می شود تا تصویر خود را قبل و بعد از بهینه شدن در این ابزار ببیند تا مطمن شوند تصویر هیچگونه افت کیفیت نخواهد داشت . ابزار بعدی که به صورت رایگان در اختیار کاربران و به ویژه طراحان قرار داده شده است ابزار TinyPNG می باشد این سایت به شما اجازه می دهد فایل ها با پسوند PNG و JPEG را از کامپیوتر خود به سایت خود آپلود نمایند و سپس فایل بهینه شده را از آن دانلود کنید این ابزار به هر کاربر اجازه می دهد تا 20 تصویر را به صورت رایگان بهنه سازی نماید و بعد از آن کاربران در صورتی که بیش از 20 تصویر داشته باشند باید با پرداخت 50 دلار به کار خود ادامه دهند همچنین اگر طراحی سایت شما با وردپرس است افزونه این به صورت رایگان برای این ابزار در نظر گرفته شده است .

امروزه تصاویر گیف رونق گرفته است چرا که هم مانند ویدئو متحرک و جذاب می باشد و هم حجم کمتری را نسبت به ویدئو دارد برای همین فشرده سازی این نوع تصاویر نیز بسیار رونق گرفته است ابزاری به نام EZGIF به کاربران این امکان را می دهد فایل گیف خود را از کامپیوتر به دخل این سایت آپلود کنند و میزان فشرده سازی تصویر را نیز اعلام نمایند و با این کار فایل فشرده سازی شده و بهینه گیف را دریافت نماید این سایت برای آپلود تصاویر گیف محدودیت 30 مگا بایتی قرار داده است . باید توجه داشت طراح همیشه نمی تواند به بهینه کردن تصاویر تکیه کند چرا که برخی از تصاویر بخاطر ماهیتی که دارند برای حفظ کیفیت خود لزما هنگام بهینه کردن کاهش پیدا نخواهند کرد برای همین گزینه های دیگری را باید در بهبود سرعت تصاویر در طراحی سایت در نظر گرفت یکی از این روش ها CDN می باشد این کلمه مخفف Content Delivery Network است در واقع این روش مجموعه ای از سرورهای مختلف واقع در سراسر جهان که می تواند فایل های سایت را سریعتر از وب سرور اصلی ارائه نماید تا بار کاری نیز از روی سرور برداشته شود . وب سایت های مانند BunnyCDN و یا BelugaCDN با دریافت کمترین هزینه این کار را برای سایت ها انجام میدهند .

سبک های طراحی سایت در سال 2018

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

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

چگونگی افزایش وفاداری مشتری سایت از طریق طراحی تجربه کاربری(UX)

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

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

·         آیا شما در حل مشکل درست کار می کنید؟

·         آیا طراحی شما راه حل مشکل را در بهترین حالت ممکن ارائه می دهد؟

·         آیا طرح های خود را آزمایش می کنید و راحتی آن را به خوبی احساس می نماید؟

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

رابط کاربری (UI) مکالمه ای در سایت چیست ؟

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

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

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