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

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

اثر موقعیت سریال یکی از این قوانین است. این پدیده‌ای را توصیف می‌کند که زمانی رخ می‌دهد که مغز انسان سعی می‌کند موارد مختلفی را که در یک دنباله یا گروه ظاهر می‌شوند، به خاطر بیاورد. اثر موقعیت سریال نشان می دهد که افراد می توانند به طور مؤثرتری اولین و آخرین موارد را بهتر از موارد وسط به خاطر بسپارند.

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

فرض کنید با موارد زیر به شما نزدیک شدم:

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

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

این اثر تقدم در عمل است. ما تمایل داریم اولین مورد را در یک دنباله واضح تر از آنچه بعد از آن می آید به یاد بیاوریم.

هنگامی که لیست ها را تکرار می کنیم، تمایل داریم با لیست اول شروع کنیم، که به طور موثر اولین مورد را در حافظه بلند مدت ما قرار می دهد. دلیل دیگر این است که اولی معمولاً بیشتر ظاهر می شود – یا به دلیل اولویت فرض شده یا به دلیل موقعیت اصلی آن در شروع.

حالا فرض کنید که با هم در یک مهمانی هستیم و من شما را با تعدادی از اعضای خانواده ام آشنا می کنم:

“این پدر من، عمو چارلی، برادرم اریک، همسرش تامی، پسر عموی براد، عمه زلدا، و آن پدربزرگ من جو است.”

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

اینگونه است که اثر تازه کار می کند. هنگامی که شما یک دسته از موارد مشابه را به طور همزمان داشته باشید، آخرین مورد را قوی تر به خاطر خواهید آورد.

یکی از دلایلی که اثر تازه کار می کند این است که آخرین مورد مستقیماً به حافظه کاری ما می رود، که یادآوری آن را نسبت به آنچه قبل از آن آمده آسان تر می کند. فاکتور زمان هم هست

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

در اینجا چند روش برای استفاده از افکت موقعیت سریال در طراحی های وب و متعاقبا بهبود تجربه کاربر وجود دارد:

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

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

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

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

و این بخش CTA است:

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

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

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

اگر به طرح‌های منوی مختلف موجود در یک افزونه وردپرس نگاهی بیندازید منوی مگا Groovyبه عنوان مثال، این الگو را بارها و بارها خواهید دید:

ما به چند دلیل هدر وب سایت را به این روش طراحی می کنیم.

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

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

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

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

این تنها زمانی نیست که مهم است که بخشی از وب سایت خود را چسبناک کنید. برای مثال وبلاگ را در نظر بگیرید. با انتشار محتوای جدید، محتوای قدیمی تر و بیشتر از چشم بازدیدکنندگان دور می شود.

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

یکی از راه ها استفاده از وردپرس است این پست را چسبناک کنید ویژگی:

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

گزینه دیگر استفاده از یک تم وبلاگ وردپرس است نوشتن برای ایجاد یک طرح وبلاگ که در آن پست برجسته رتبه اول را می گیرد:

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

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

به همین دلیل مهم است که داده‌های زنده وب‌سایت خود را مطالعه کنید تا ببینید دامنه توجه متوسط ​​بازدیدکنندگان چگونه به نظر می‌رسد.

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

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

همچنین می‌توانید اطلاعاتی در مورد میزان پیمایش افراد به پایین صفحه دریافت کنید. نمونه ای از نحوه عملکرد این کار را در وب سایت Hotjar خواهید دید:

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

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

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

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

بیایید از مثال جدول قیمت گذاری استفاده کنیم.

آیا تا به حال به این تعداد توجه کرده اید افزونه های جدول قیمت گذاری و الگوهای جدول قیمت گذاری – مانند آنچه در آن گنجانده شده است دیجیت – اغلب طرح/گزینه مرکزی را متفاوت از بقیه به نظر می‌رسانند؟

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

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

ویدئو می تواند راه موثری برای برقراری ارتباط با بازدیدکنندگان وب سایت باشد. قالب بصری اغلب درک ایده های طولانی، پیچیده یا انتزاعی را بسیار آسان می کند.

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

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

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

Envato Elements هزاران مورد دارد الگوهای نیش لوگو برای انتخاب از:

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

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

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

با Tuts+ اصول طراحی را بیشتر بیاموزید

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