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

پیامدهای این امر می تواند وحشتناک باشد: در طول آزمایشات ، واکنش ناکافی سایت به فشار دادن دکمه "بازگشت" دلیل ترک بسیاری از کاربران و سوء استفاده و نظرات ناخوشایند بود. در بیشتر موارد ، حتی آزمودنی های محترم و موهای خاکستری موهای خود را به طرز وحشتناکی از دست دادند.

در این مقاله یاد خواهید گرفت:

• انتظارات کاربران از دکمه برگشت ؛
• 5 اشتباه رایج چیست؟
• راه حلی ساده برای این مشکلات

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

انتظارات کاربران

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

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

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

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

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

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

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

3. فرم ثبت نام / پرداخت

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

این رویکرد می تواند مشکلاتی را به همراه داشته باشد ، یک مثال ساده - یک فرد می خواهد مرحله ای را در پر کردن فرم به منظور ویرایش اطلاعات وارد شده به عقب برگرداند. با فشار دادن دکمه "برگشت" ، آن را به سبد برگردانده ، و همه داده های وارد شده (!) را حذف می کند. تحریک و ترک سایت یک اثر طبیعی است.

ممکن است فناوری AJAX انتظارات کاربران را برآورده نکند: از نظر فنی ، هر صفحه AJAX زیر یک URL است ، اما به نظر می رسد صفحات جدیدی در حال باز شدن است.

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

کاربران آماده رها کردن دکمه برگشت نیستند

با توجه به استفاده گسترده از این ویژگی مرورگر اینترنت ، مساله عدم تطابق انتظارات کاربران با دید توسعه دهندگان بسیار مهم است - نباید به آن بی اهمیت نگاه کرد.

دکمه "بازگشت به عقب" به خصوص توسط کاربران برنامه های کاربردی تلفن همراه و وب سایت ها مورد پسند واقع شد. همانطور که در بررسی نسخه های موبایل سایت ها نشان داده شده است ، اکثر کاربران از این عملکرد در تمام منابع پیشنهادی استفاده می کنند. علاوه بر این ، استفاده از دکمه تنها به برگشتن یک صفحه محدود نمی شود - برخی از افراد آن را تا 15 (!) بار پشت سر هم فشار می دهند.

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

راه حل

خبر خوب این است که HTML5 یک راه حل نسبتاً ساده برای این مشکل دارد و آن را HTML5 History API می نامند. به طور خاص ، تابع history.pushState () به شما امکان می دهد URL را بدون بارگیری مجدد صفحه تغییر دهید. بر این اساس ، سایت به اندازه انتظارات کاربری که دکمه "بازگشت" را فشار داده است ، به درستی عمل خواهد کرد.

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

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

اصلا چه گزینه هایی داریم:

1. ویرایش فایل های قالب Jooml
2. فقط کافی است کد دکمه را در جایی که می خواهید بچسبانید.
3. یک ماژول "کد HTML" ایجاد کنید ، کد دکمه را در آنجا وارد کنید و سپس این ماژول را در مکان مناسب نمایش دهید.

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

بنابراین ، در یکی از سایت های من از گزینه سوم استفاده کردم:

ماژول "کد HTML" ایجاد شد و در آنجا ، با استفاده از برنامه افزودنی "Sourcerer" ، که امکان افزودن هرگونه کدی به مواد را فراهم می کند ، کد دکمه درج شد.

کد دکمه کار من:

متن کمی با یک پیکان با استفاده از اجزای بوت استرپ 3 تزئین شده است و خود دکمه از طریق CSS طراحی شده است.

عصر بخیر ، سوالی وجود داشت که چگونه هنگام سفارش ، دکمه را به عقب منتقل کرده و در کنار دکمه بعدی قرار دهید. اکنون برای من اینطور به نظر می رسد. Https://yadi.sk/i/_ZNvGrvEhqSk3 ..

راه حلی وجود دارد

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

دکمه ای را که می خواهید در قالب قرار دهید ، برای مثال ، این مورد را وارد کنید

+1

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

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

راه حلی وجود دارد

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

سایتی که مشخص کرده اید از افزونه ای برای سبد خرید استفاده می کند. به عنوان یک گزینه با تغییرات ، می توانید از ارسال کالاهای اضافی نه به؟ Html = 1 ، بلکه به؟ Html = 1 & items = 1 استفاده کنید ، این کار کل محتویات را برمی گرداند سبد خرید

عصر بخیر. در هر مرحله در هنگام پرداخت ، دکمه "بعدی" نشان داده می شود. در موضوع "Suprime" ، من کد دکمه را پیدا کردم: راه حلی وجود دارد

سلام ، خوشحال می شویم کمک کنیم: [ایمیل محافظت شده]

آقای. ایکس

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

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

+4

توجه کنید https: // site/forum/386/predlozheniy ... نکته شماره دو هنوز اجرا نشده است ، اما شما سعی می کنید با پیمایش بیشتر لیست بارگذاری شده ، لیستها را با 500-1000 محصول ویرایش کنید ، مشکلی که دوباره مرتبط است تا نقطه ...

به روز رسانی Shop-Script 6.2.1

Shop Script 6.2.1 امروز منتشر شد. موارد جدید: 1. اضافه شدن قابلیت غیرفعال کردن بارگذاری تنبل لیست محصولات در پس زمینه برای فعال کردن ناوبری صفحه. اضافه شده ...

بعد از ظهر بخیر ، چنین مشکلی وجود داشت - یک خطای تعریف نشده در پنل مدیریت ، ذخیره نمی شود ، بخشی از منو ناپدید می شود ، هنگام اضافه کردن بلوک های جدید به WYSIWYG ، یک خطای نامشخص می دهد که من آن را به روز نکردم زیرا یک فایل را تغییر دادم مقدار زیادی در pkhp لطفاً بگویید چه چیزی ...

+19 انجام شده

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

با سلام ، هنگام کار با سیستم WebAssyst Shop-Script با چنین مشکلی روبرو شدم: هنگام ورود به وب سایت یک فروشگاه آنلاین ، به جای شماره 0 ، مقدار پول در کنار سبد خرید نمایش داده می شود ، در حالی که خود سبد خرید خالی است. وقتی روی پیوند "سبد خرید" مانند این کلیک می کنید ...

عصر بخیر. در همه صفحات فروشگاه ماژولی وجود دارد که میزان کالاهای موجود در سبد خرید را نشان می دهد. وظیفه نشان دادن تعداد اقلام موجود در سبد خرید است. الگو به طور پیش فرض است. در فایل index.html ، کد را به این شکل تغییر دادم: (if $ wa-> shop)...

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

س questionال این است: چگونه می توان پنجره سبد خرید را نشان داد که میزان کل کالاهای موجود در آن را نشان می دهد ، و کجا می توانید کلمه واقعی "مبلغ" یا عبارت "کالا به مبلغ:" را قبل از مبلغ نمایش داده شده بنویسید؟

راه حلی وجود دارد

من کد زیر را دارم: پیوند را به جز اصلی در همه جا نمایش دهید: (اگر $ wa_url! = $ Wa-> currentUrl (0،1)) ... (/ اگر) و نیازی نیست که پیوند را در سه صفحه نمایش دهم ، این در اصلی ، در / سبد خرید / و / در پرداخت است / لطفاً بگویید چه چیز دیگری باید به این اضافه شود ...

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

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

به عنوان مثال ساده ترین آن استفاده از این خط در یک اسکریپت در صفحه راهنما است:

روش تاریخ ، تاریخچه انتقال صفحات را به خاطر می آورد و در واقع ، استفاده از آن شبیه به استفاده از دکمه های "Forward" و "Back" مرورگر است ، فقط کمی کاربردی تر. این ساده ترین و راحت ترین راه است ، اما تنها با یک شرط: اگر صفحه جدید (کمکی) در پنجره جدیدی باز نشود. به هر حال ، در غیر این صورت ، صفحه کمکی برای اولین بار باز می شود (دقیقتر ، جلسه برای اولین بار خواهد بود ، هنوز هیچ تغییری در آن انجام نشده است). این بدان معناست که در واقع ، جایی برای بازگشت وجود ندارد. بنابراین ، نمی توان این روش را جهانی نامید. اگر کاربر صفحه را به زور در یک برگه جدید باز کند یا مرورگر آن را مطابق با تنظیمات انجام دهد ، کار نخواهد کرد. در این حالت ، ویژگی target = "_ self" پیوند کمکی نمی کند: بازگشت از صفحه کمکی باز امکان پذیر نخواهد بود (البته اگر آدرس URL صفحه اصلی را در آدرس مرورگر وارد نکنید نوار دستی)

روشی همه کاره تر

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

این را می توان به صورت شماتیک به شرح زیر نشان داد:

اسکریپت در صفحه اصلی

در صفحه ، با چه چیزی باید انتقال انجام شود ، اسکریپت زیر وجود دارد که یک تابع است - کنترل کننده کلیک ماوس (onclick):

برای اینکه تابع در اسکریپت کار کند ، باید کنترل کننده آن را روی یکی از عناصر به یکی از روش ها نصب کنید ، به عنوان مثال ، مانند این:

http://example.com "onclick =" to_comment_rules ("http://example.com") ؛ return false "> برای رفتن به صفحه فرعی کلیک کنید

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

اصل این اسکریپت این است که وقتی تابع save_back (url) فراخوانی می شود ، یک صفحه (کمکی) با آدرس url باز می شود. برای انجام این کار ، پروتکل صفحه (به عنوان مثال ، http یا https) ، و بقیه نشانی اینترنتی صفحه اصلی وب ، شامل ، شاید ، داده های موجود درخواست GET (این همان چیزی است در URL بعد از علامت "؟" قرار دارد). داده های دریافتی به آدرس صفحه باز شده اضافه می شود - و انتقال به آن صورت می گیرد.

اسکریپت در صفحه راهنما

باید چیزی شبیه به این اسکریپت داشته باشد:

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

برگشت

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

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

برگشت

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

ملاحظات

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

روش ترکیبی

بنابراین ، اجازه دهید وظیفه را تعیین کنیم:

اگر صفحه کمکی در همان برگه (پنجره) باز شد ، بگذارید متد history.back () در دسترس باشد.

اما اگر صفحه کمکی در یک پنجره جدید باز شود ، روش مورد بحث در بالا باید کار کند (زیرا در این مورد history.back () کار نمی کند).

اسکریپت صفحه راهنما کمی تغییر می کند (خط بالا اضافه می شود):

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

نتیجه

البته ، این مقاله تنها یکی از گزینه های فناوری "بازگشت" را نشان می دهد بازگشت- به صفحه اصلی برای این منظور ، علاوه بر درخواست GET ، می توان از فناوری های دیگر استفاده کرد ، به عنوان مثال ، ذخیره سازی محلی localStorage. علاوه بر این ، برای شبیه سازی کامل بازگشت بازگشتخوب است که مقدار پیمایش صفحه اصلی را از طریق درخواست GET ارسال کنید - به طوری که بعداً ، حتی هنگام باز کردن صفحه کمکی در یک پنجره جدید ، به همان محل در صفحه اصلی بازگردید ، جایی که انتقال قبلاً انجام شده است به