Kaptain Kitty
دسته ها :از دست ندهید
انتشار :۱۷ آذر ۱۳۹۳
بازدید :498 بار

Breakpoint ها و آینده ی وب سایت ها

وقتی که آیفون در سال ۲۰۰۷ وارد بازار شد، نمایی که مرورگر آن ارائه می کرد (و توسط استیو جابز بزرگ طراحی شده بود) حاکی از آن بود که اپل خیلی نگران pinch کردن جهت عمل zooming و swipe کردن جهت عمل scroll به عنوان بخشی از تجارب کاربران خود در وبگردی، نیست.

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

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

پویایی آستانه

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

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

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

Breakpoint های امروزی

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

در طراحی ریسپانسیو، متد غالب در تعریف این breakpoint ها، از طریق تنظیم مدیا کوئری می باشد.

[codesyntax lang="php"]

@media screen and (min-width: 240px) and (max-width: 320px){

body { background: red; }

}

[/codesyntax]

مارک آپ بالا به وضوح دو آستانه (۲۴۰ پیکسل و ۳۲۰ پیکسل) را تعریف می کند که طیفی را تشکیل می دهند که اقدامات در آن طیف انجام می شوند (در این مورد، تغییر رنگ پس زمینه به قرمز). مفهوم این کار نیز بسیار قابل فهم و ساده می باشد.

مدیا کوئری ها

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

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

برخی از متخصصین پیشنهاد می هند که breakpoint ها را بر اساس کلاس های مختلف دستگاه های طراحی کنیم. این موضوع در تحقیقات مختلف مورد بررسی قرار گرفت و در یک رای گیری جمعی در مورد اینکه “آیا مدیا کوئری ها باید کلاس های مختلف دستگاه را هدف قرار دهند یا خیر؟”، حدود ۵۴ درصد پاسخ مثبت داده بودند. اما حتی اگر بخواهید هم هیچ روش شهودی برای این کار وجود ندارد.

Breakpoint های جدید

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

Breakpoint ها در طراحی وب زمینه ای

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

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

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

– توانایی های فیزیکی کاربر کدام است؟

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

– موقعیت مکانی کاربر چیست؟

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

– موقعیت زمانی کاربر چیست؟

انسان ها معمولا بنده ی عادت هستند و احتمالا اعمال خاصی را در زمان های خاصی انجام می دهند

– دستگاه مورد استفاده ی کاربر چیست؟

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

– علاقمندی های کاربر چه چیزهایی می باشد؟

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

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

بنابراین، چطور باید وب سایتی را طراحی کنیم که زمینه ای باشد؟ چطور می توان breakpoint ها را در حالت زمینه ای مشخص کرد؟ یک سناریو برای این منظور وجود دارد.

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

آیا به این دلیل که وب سایت به صورت ریسپانسیو طراحی شده است به راحتی تحت تاثیر قرار میگیرید؟ آیا انجام یک معامله ی خوب در بخش وسایل الکترونیکی در این لحظه برای شما مهم است؟ آیا می خواهید که به شما یادآوری شود که برخی از آیتم هایی که در وب سایت مشاهده کرده اید شامل Lincoln Logs و جا مسواکی مرد عنکبوتی بوده است؟ منظور این است که الان ساعت ۶:۱۸ دقیقه است و شما در حال وبگردی از طریق یخچال خود هستید. آیا این نیاز به یک مهندس هوا فضا دارد تا بفهمد که در حال حاضر طبقه بندی محصولات خوراکی باید اولویت بالاتری داشته باشد؟

مطمئنا سناریوهای بیشماری مشابه با این وجود دارد و کسی که با تکنولوژی وب آشنایی ندارد به راحتی از کار با وب سایت هایی که حداقل انتظارات او را برآورده نمی کنند نا امید می شود.

برچسب‌ها, , , ,

مطالب مرتبط

اشتباه کردن در مسیر فریلنسر شدن بخشی از منحنی یادگیری است. هیچ‌کس یک شبه فریلنسر نمی‌شود و دستۀ جدیدی از مشتریان پول‌ساز را به یکباره نمی‌یابد و باز هیچ‌کس ۱۰۰۰۰ دلار در یک هفته به چنگ نمی‌آورد تا بقیۀ ماه را به خوشگذرانی در ساحل رویایی با شن‌های سفید بگذراند. زمانی که من تازه کارم […]

بیانه لینکدین در روز افتتاح لینکدین لرنینگ: “امروز خوشحالیم تا آغاز فعالیت لینکدین لرنینگ را به عنوان یک پلتفرم یادگیری آنلاین اعلام کنیم  که افراد و سازمان ها را قادر می سازد تا به آمال و اهداف خود دست یابند. هدف ما کمک به افراد برای کشف  و توسعه  مهارت های مورد نیاز آنها ازطریق  یادگیری شخصی […]

نسخه‌ی ۳٫۱۲ تلگرام ساعاتی پیش منتشر شد و در این نسخه نیز همانند ورژن‌های قبلی امکانات جذاب و بسیار کاربردی جدیدی به این برنامه‌ی محبوب اضافه شد. سرنجام بعد از مدتی انتظار نسخه‌ی ۳.۱۲ تلگرام منتشر شد و امکاناتی همچون ساخت تصاویر گیف، ویرایشگر جدید عکس‌ها و امکان اضافه کردن ماسک و استیکر و متن […]

آی‌فون ۷ و ۷ پلاس اپل هفته جاری با چندین امکان جدید ارائه شد. در این مطلب نگاهی می‌اندازیم به مهم‌ترین ویژگی‌های نسل جدید آی‌فون‌ها که در آنها دیگر خبری از جک هدفون نیست؛‌ آغاز عصر فراگیری هدفون‌های بی‌سیم، به حکم اپل. کمپانی اپل به رسم هر ساله سپتامبر امسال هم در مراسم ویژه‌ای طیفی […]

نظراتتان را برایمان بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب ما تو این شبکه های اجتماعی هم پخش میشه