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

در این آموزش ویدیویی ما به 3 گزینه برای نحوه ساخت دکمه BACK برای حرکت در سایت به صفحات قبلی به ترتیب معکوس نگاه خواهیم کرد. دکمه BACK همچنین زمانی ضروری است که لینک از چندین صفحه سایت (A1, A2...An) به همان صفحه (B) منتهی شود و از این صفحه (B) باید به صفحه قبلی (An) برگردید. از سایتی که از آن به صفحه (B) رسیدید.

ویدیوی آموزشی جدید را تماشا کنید:

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

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

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

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

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

و من آن را در قالب قرار می دهم. به نظر می رسد این است. ما فقط متن داریم و با رنگ سفید برجسته شده است. من آن را در اینجا پست می کنم. برای اینکه بفهمیم این همه چگونه کار می کند، کلیدهای ctrl+alt+E را فشار می دهیم تا کل سایت را با تمام صفحات آن در مرورگر مشاهده کنیم. صفحه اصلی سایت به این صورت است. ما می توانیم در منو گشت و گذار کنیم، صفحات را انتخاب کنیم. در اینجا ما منوهای کشویی داریم. و به عنوان مثال، از صفحه اصلی بلافاصله به صفحه "صفحه 3" رفتیم. و در اینجا یک دکمه بازگشت داریم.

این دکمه فعال است، اما زمانی که ماوس را روی آن قرار می دهید، دستی با انگشت ظاهر نمی شود. ما می توانیم با خیال راحت روی این دکمه کلیک کنیم و به صفحه اصلی هدایت می شویم. به همین ترتیب می‌توانیم روی صفحه «صفحه-3» کلیک کنیم، سپس به صفحه «صفحه-4» برویم و روی دکمه «بازگشت» کلیک کنیم، به صفحه «صفحه-3» می‌رسیم و اگر کلیک کنیم. دوباره روی دکمه "بازگشت" "، سپس ما را به صفحه اصلی می برد. دکمه برگشت به این صورت است.

اما این دکمه را به سختی می توان دکمه نامید، زیرا فقط این کتیبه است که با رنگ سفید برجسته شده است. اگر بخواهیم در Muse آن را ویرایش کنیم، فقط می توانیم اندازه متن را تغییر دهیم، مثلاً "36" را اینجا قرار می دهم تا بهتر آن را ببینید. به نظر من نمی توانیم رنگ متن را تغییر دهیم. حالا سعی می کنم قرمز را بگذارم. من قرمز را انتخاب کردم، اما این به هیچ وجه روی حروف ما تأثیری نداشت، بنابراین نمی توانیم رنگ را تغییر دهیم. ما می توانیم اندازه را تغییر دهیم. بیایید سعی کنیم آن را پررنگ کنیم و آن را در مرکز قرار دهیم. تنها کاری که می توانیم انجام دهیم این است که اینگونه ویرایش کنیم. اگر بخواهیم این بلوک را پر کنیم، مثلاً آن را نارنجی کنیم، متن ما همچنان با رنگ سفید برجسته می شود و در اصل، خیلی زیبا به نظر نمی رسد.

حالا ما آن را کپی می کنیم. ctrl+C رو میزنم و میرم تو برنامه و ctrl+V رو میزنم تا توی سایت Paste کنم. شبیه این لینک است. لینک ما آبی است حالا او خیلی به چشم نمی آید. بیایید یک فونت 36 را نیز بسازیم تا آن را بزرگ کنیم و از نزدیک ببینیم. در اینجا ما فقط یک پیوند آبی داریم. اگر اکنون ctrl+alt+E را فشار دهیم، می بینیم که در هنگام مشاهده، شبیه این لینک آبی معمولی است. بیایید چند بار دیگر آن را مرور کنیم تا ببینیم، یک بار، دو بار کلیک کنید، برگردید. این لینک ظاهری مشابه یک لینک معمولی دارد.

ما می توانیم سبک های پیوند را در Adobe Muse به آن اعمال کنیم. سبک‌های پیوند را در بخش «هیپرلینک‌ها» پیدا کنید، «ویرایش سبک‌های پیوند» را انتخاب کنید. من قبلا یک نسخه آماده دارم. اکنون نسخه آماده شده را دارم. می بینید که سبکی روی آن اعمال شده است. در حالت استاندارد و هنگام نگه داشتن نشانگر ماوس، رنگ آبی و در حالت فعال - قرمز است. در حین تماشا دیدی سبک دومی که من ایجاد کردم تمام حالت های سیاه بود. می توانیم این استایل را روی این دکمه اعمال کنیم. به عنوان مثال، من این سبک سفارشی را بر روی این دکمه انتخاب و اعمال خواهم کرد. و خواهید دید که کتیبه ما سیاه شده است.

اینجا هم میتونیم یه فیل انجام بدیم مثلا با همون رنگ نارنجی انجامش میدم. در اینجا می توانید از قبل متن را ویرایش کنید. بیایید آن را در وسط قرار دهیم و آن را پررنگ کنیم. و در اصل، این گزینه در حال حاضر بیشتر شبیه یک دکمه است. دیگر چنین برجسته سفید وجود ندارد و در اصل، این گزینه در حال حاضر کاملاً مناسب است. در حین مرور (ctrl+alt+E)، به صفحه «page-3»، به صفحه «page-4» رفته و دوباره کلیک کنید. این دکمه دقیقاً مانند دکمه اول عمل می کند، فقط گزینه های بیشتری برای ویرایش طرح دارد.

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

من به Muse می روم و روی "Insert" کلیک می کنم. و این گزینه سومی که داریم یک تصویر است. برای اینکه بتوانیم در اینجا نوعی عکس داشته باشیم، باید چند فایل تصویری را از اینترنت دانلود کنیم یا خودمان آن را بسازیم. ما تصویر را از طریق عملکرد "File" برنامه اضافه می کنیم، "افزودن فایل ها برای انتقال" را انتخاب کنید. من قبلاً چند عکس از اینترنت دانلود کرده ام. ما می توانیم یکی را انتخاب کنیم. بیایید این مورد را با دکمه برگشت انتخاب کنیم. اکنون اگر به بخش "منابع" نگاه کنیم، دکمه "back2.png" - "Transmit" را اضافه کرده ایم. ما این فایل را برای انتقال داریم.< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "برگشت" / > < / a >

تمام شد، روی "OK" کلیک کنید. ما هیچ تغییری در خود Muse نخواهیم دید. ما همه تغییرات را فقط در هنگام مشاهده سایت در مرورگر مشاهده خواهیم کرد. بیایید دوباره ctrl+alt+E را فشار دهیم تا سایت را در مرورگر مشاهده کنیم و سعی کنیم در صفحات ما گشت و گذار کنیم.

به صفحه مثلاً «صفحه ۲-۱» برویم، حالا به صفحه «صفحه ۲» برویم، حالا به صفحه «صفحه ۳» و سپس به صفحه «صفحه ۴» برویم. و حالا اگر دکمه برگشت را فشار دهیم به ترتیب معکوس به عقب برمی گردیم صفحه اصلیسایت روی "بازگشت" کلیک کنید، به صفحه "صفحه-3"، به صفحه "صفحه-2" بروید. و اینجا دیگر دکمه ای نداریم. اگر آن را در قالبی قرار دهیم که در صفحه "صفحه-2" اعمال شده است، در اینجا دکمه "بازگشت" نیز خواهیم داشت. از آنجایی که ما یکی نداریم، باید تنها با کلیک بر روی دکمه "صفحه اصلی" در منو به صفحه اصلی بروید. به عنوان مثال به صفحه «صفحه 2-2-2» برویم، سپس به صفحه «صفحه 2-2-1» و سپس به صفحات «صفحه-3» و «صفحه-4» برویم. و اکنون به ترتیب معکوس: صفحه "صفحه-3"، صفحه "صفحه 2-2-1"، صفحه "صفحه 2-2-2" و به صفحه اصلی.

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

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

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

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

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

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

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

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

به عقب برگرد

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

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

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

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

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

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

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

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

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

بیشتر بازدیدکنندگان جنبه‌های فنی را درک نمی‌کنند، اما فقط بر ایده‌های بصری در مورد نحوه عملکرد منبع تکیه می‌کنند. بنابراین، وقتی روی دکمه «بازگشت» کلیک می‌کنند، صفحه‌ای را انتظار دارند که قبلاً تجربه مهمی در آن داشته‌اند، اما صفحه‌ای با رابط کاربری کمی تغییر یافته دریافت می‌کنند.

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

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

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

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

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

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

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

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

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

کاربران حاضر نیستند دکمه بازگشت را رها کنند

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

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

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

راه حل

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

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

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

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

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

+1

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

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

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

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

سایتی که شما اشاره کردید از یک افزونه برای سبد خرید استفاده می کند سبد خرید

بعدازظهر بخیر در حین پرداخت، یک دکمه "بعدی" در موضوع "Suprime" نشان داده شده است.