وبلاگ رسانگار
با ما حرفه ای باشید

سرور مجازی NVMe

روش رانندگی UX با AJAX

0 2
زمان لازم برای مطالعه: 5 دقیقه


روش رانندگی UX با AJAX

با استفاده از اینترنت تلفن همراه که مرور وب مبتنی بر دسکتاپ را تحت الشعاع قرار می دهد، ساخت وب سایت ها با تاکید بیش از هر زمان دیگری مهم است. روی سریع page بارها و واکنش های سیال به ورودی کاربر. یکی از فناوری‌های مهمی که ما برای رسیدن به این هدف استفاده می‌کنیم، AJAX است که مخفف «جاوا اسکریپت غیرهمزمان و XML» است. AJAX به شما این امکان را می دهد که بخش هایی از یک صفحه وب را بدون بیرون انداختن مداوم DOM (معماری HTML page) – از بین بردن نیاز به کل page بارگذاری می شود و پاسخ سریع تری به ورودی کاربر ایجاد می کند. ساخت وب سایت روی یک چارچوب 100% AJAX تکنیکی است که امکانات جدیدی را در مورد آنچه در توسعه وب قابل دستیابی است نشان می دهد. ما تقریباً ده سال پیش ساخت سایت‌هایی را به صورت 100% AJAX آغاز کردیم و از آن زمان تاکنون چیزهای زیادی در مورد روش به کارگیری مؤثر آن به منظور بهبود تجربه کاربر آموخته‌ایم. در این مقاله تعدادی از مزایای خاص و برخی محدودیت‌های این تکنیک را بررسی خواهیم کرد.

پاسخ سریع کاربر

یکی از عناصر کلیدی یک UX موثر، پاسخ سریع به ورودی کاربر است، اما با یک وب سایت استاندارد، کاربران منتظر می مانند تا تعاملات صورت گیرد، زیرا درخواست ها از طریق HTTP (یا HTTPS) به سرور ارسال می شود و در نتیجه یک وب سایت کامل می شود. page بارگذاری برای هر تغییر این process با هر کلیک ماوس برای درخواست جدید رخ می دهد page، تصویر بزرگتر یا اطلاعات بیشتر؛ DOM به طور کامل از بین می رود و دوباره در مرورگر شما بارگذاری می شود – این اغلب بیهوده است process هنگام بارگذاری صفحات روی همان سایت، زیرا معمولاً محتوای مشابهی دارند.

جستجوی Kayak توسط AJAX انجام می شود و به محض شروع تایپ کردن، پیشنهاداتی را ارائه می دهد.

یکی از مزیت های اصلی AJAX جریان مداوم اطلاعات آن است که بارگیری و تخلیه DOM بدون مانع است و در نتیجه کنترل بهتری بر تجربه و توجه بازدیدکنندگان به همراه دارد. با AJAX، برنامه‌های کاربردی وب می‌توانند داده‌ها را به‌صورت ناهمزمان به و از سرور بدون تداخل با نمایش داده‌های موجود ارسال کنند. page. تفاوت اصلی بین پیاده سازی استاندارد AJAX و وب سایت 100٪ ساخته شده توسط AJAX این است که در دومی DOM اصلی بارگذاری می شود. روی معمولاً بازدید اولیه از سایت روی خانه page; هر چیز دیگری که اتفاق می افتد صرفاً دستکاری آن بار اولیه است. نمونه بارز سیالیت ارائه شده توسط AJAX، نقشه گوگل است. وقتی بزرگ‌نمایی، کوچک‌نمایی می‌کنید، در یک شهر در منظر پرنده یا در نمای خیابان حرکت می‌کنید، اطلاعات به‌طور یکپارچه و پیوسته برای استفاده فوری شما ارائه می‌شود. هنگام انتقال بین صفحات یا به‌روزرسانی محتوا در یک برنامه وب، AJAX اجازه می‌دهد تا به ورودی کاربر به شیوه‌ای مناسب پاسخ داده شود، مانند خروجی فرم به‌روز شده در زمان واقعی بدون بارگیری مجدد page، انیمیشن های متنی در حال انتقال بین صفحات یا هنگام بارگیری نمای جزئیات.

google_maps

هنگام طراحی صفحات با حجم زیادی از محتوا، از الگوی اسکرول بی نهایت AJAX استفاده می کنیم که نه تنها با نشان دادن اطلاعات بلافاصله مرتبط با UX، پهنای باند مرورگر را ذخیره می کند، بلکه اصطکاک کاربر را نیز کاهش می دهد. در شرکت خودمان اخبار page به عنوان مثال، با اسکرول کردن به پایین، مقالات بیشتری بارگیری می‌شوند، استفاده از صفحات حذف می‌شود و در عوض اطلاعات بیشتری بر روی صفحه بارگیری می‌شود که خواننده به آن نیاز دارد. این بدون اصطکاک process بارگیری و تخلیه محتوای بیشتر روی-تقاضا به بازدیدکنندگان ما این امکان را می دهد که دقیقاً به همان اندازه که می خواهند اخبار دریافت کنند بدون اینکه مانعی برای قصد آنها ایجاد کنند.

UX بدون درز

به دست آوردن کنترل بر روش بارگذاری محتوا یک وب سایت فرصتی منحصر به فرد برای طراحی ایجاد می کند page انتقال، بارگذاری انیمیشن ها و نشانه های بصری که به کاربر کمک می کند سلسله مراتب سایت را درک کند. این نیز فرصتی برای خلاقیت با برندسازی این شرکت است. یک وب سایت با چارچوب 100٪ AJAX (زیرا کامل نیست page load) بازخوردی در مورد پیشرفت بارگیری خود در پنجره مرورگر ارائه نمی دهد، که اگر بازدیدکننده برای مدت طولانی بدون پاسخ بماند، منجر به سردرگمی بالقوه می شود. اینجاست که نشانگرهای وضعیت بارگیری سفارشی وارد عمل می‌شوند و نشانه‌هایی از پیشرفت در طول زمان انتظار را ارائه می‌دهند.

estesparkmedical

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

زیلو

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

افزودنی‌های کوچکی از این دست در ایجاد تجربه‌ای به یاد ماندنی برای بازدیدکنندگان شما تحسین‌برانگیز است و با استفاده از AJAX امکان‌پذیر می‌شود.

کنترل مسیر URL با استفاده از تاریخچه HTML5

بدون فردی page بارگذاری می شود، یک سایت با داشتن یک URL واحد تعریف می شود که باعث ایجاد مشکل می شود روی سایت‌های AJAX ضعیف ساخته شده‌اند، زیرا کاربران تلاش می‌کنند با استفاده از دکمه‌های جلو و عقب مرورگر خود نشانه‌گذاری یا پیمایش کنند. علاوه بر این، از آنجایی که خزنده موتور جستجوی گوگل از نظر تاریخی جاوا اسکریپت را نمی خواند، نگرانی هایی در مورد اینکه چگونه سایت های دارای AJAX می توانند در نتایج جستجوی ارگانیک گوگل بازیابی شوند وجود داشته است. هر دوی این شرایط با به دست آوردن کنترل روی مسیر URL با استفاده از حل می شوند API تاریخچه HTML5. هر یک page یک سایت 100% AJAX و نماهای جایگزین آن درخواست خودشان محسوب می شوند. همانطور که در یک سایت AJAX حرکت می کنید – حتی اگر از نظر فنی یک سایت باشد page load – URL موجود در مرورگر به روز می شود تا یک آدرس منحصر به فرد ارائه دهد که وضعیت مشاهده فعلی را نشان می دهد. علاوه بر این، می‌توانیم به رویدادهای تغییر تاریخچه گوش دهیم تا از دکمه برگشت مرورگر پشتیبانی کنیم و وضعیت مشاهده قبلی را برگردانیم. هر یک از این URL های منحصر به فرد به طور کامل توسط گوگل ایندکس شده اند، به این معنی که این رویکرد کاملاً سازگار و برای SEO مفید است.

a9

آمازون A9 خدمات جستجو بستگی دارد روی AJAX برای بازیابی حجم قابل توجهی از داده ها بدون از دست دادن تاریخچه جستجوی کاربر.

در نتیجه

همانطور که می بینید، AJAX جزء لاینفک پیشرفت توسعه وب مدرن است و جایگزین تعدادی از فناوری های ضعیف می شود که تجربه کاربری ضعیفی را ارائه می دهند. بدون AJAX، همه page تقریباً برای هر تعامل کاربر، محتوا باید به طور کامل بارگیری می شد، حتی اگر فقط برخی از اطلاعات تغییر کرده باشند. این مانع از سرعت، بار اضافی ایجاد کرد روی سرور و استفاده از پهنای باند بیش از حد. با ساختن روی یک چارچوب 100٪ AJAX، ما می توانیم سایت هایی را ایجاد کنیم که مطابق با نیازهای مشتریان سفارشی شده باشند، ناوبری قابل دسترسی را ارائه دهیم که می تواند توسط بازدیدکنندگان سایت نشانه گذاری شود، و آن عملکرد روی یک سطح بسیار بالاتر

تصویر شاخص، تصویر جریان داده از طریق Shutterstock.

(برچسب‌ها به ترجمه) ajax



منتشر شده در 1403-01-13 18:08:04

منبع نوشتار

امتیاز شما به این مطلب
دیدگاه شما در خصوص مطلب چیست ؟

آدرس ایمیل شما منتشر نخواهد شد.

لطفا دیدگاه خود را با احترام به دیدگاه های دیگران و با توجه به محتوای مطلب درج کنید