Progressive Enhancement
طراحی اولیه موبایل مفهوم آشنایی ست که تصویری از نمونه اولیه میباشد. تلفن هوشمند، روشی ارائه می دهد که باعث نمایش مناسب محتوا در تبلت و رایانه های رومیزی می شود. ما این استراتژی طراحی را به عنوان استراتژی برای طراحی وب با تاکید روی محتوای صفحه اصلی (Progressive Enhancement) می شناسیم که پیشرو در طراحی می باشد.
استراتژی اصلی Progressive Eenhancement در تجربه کاربری ، یعنی طراحی برای قسمت های کوچک مشترک در تلفن های هوشمند و سپس اضافه کردن ویژگی های اختیاری بر اساس قابلیت های دستگاه. این مفهموم جدیدی نیست. در سال ۲۰۰۳، Steven Champeon و Nick Finck برای اولین بار ایده ” Leave no [user] behind” را مطرح کردند به این معنی که همه کاربران در طراحی باید در نظر گرفته شوند و در صورت استفاده از مرورگرهای مختلف به منظور حفظ محتوا، استایل متناسب با آنها نمایش داده شود.
در آینده نه چندان دور به جای مرورگرهای مختلف ، باید نحوه طراحی برای دستگاه های مختلف را در نظر بگیریم. Progressive Enhancement یعنی بهترین روش برای دستیابی به یک طراحی جهانی مناسب با صفحات با رزولوشن های مختلف است.
برای پیروزی در این میدان ما باید تعدادی سوال از خود بپرسیم.
- آیا Progressive Enhancement با موبایل ارتباط نزدیکی دارد ؟یا خیر
- آیا Progressive Enhancement قابلیت حل هر مشکلی را بصورت اتوماتیک دارد یا خیر؟
بیایید با برخی از اصول اولیه واژگان شروع کنیم. پست های وبلاگ اغلب از Mobile First، .Progressive Enhancement و طراحی ریسپانسیو استفاده میکنند ولی اینها از نظر تکنیکی یکسان نیستند.در Progressive Enhancement ،طراحی برای صفحات نمایش کوچک مانند گوشی های هوشمند شروع می شود و سپس برای صفحات نمایش بزرگتر مانند تبلت و دسکتاپ انجام میشود. Mobile First و طراحی ریسپانسیو دو ابزار متفاوت برای طراحی صفحه اصلی می باشند. Mobile First محتوا را با غالب مورد استفاده تطبیق می دهد. در حالی که طراحی ریسپانسیو برای دستگاه های مختلف به یک شکل است و تنها باید سایز المان های طراحی شده را در رزولوشن های مختلف تغییر داد.
آیا آنها روی صفحه نمایش متفاوت ظاهر می شوند؟ اگر خوب انجام شود ، نه واقعاً. هنگام ایجاد یک وب سایت با تعامل اصلی، طراحی ریسپانسیو یا طراحی انطباقی هر دو قابل اطمینان هستند . هدف نهایی داشتن سایتی است که فارغ از چگونگی دسترسی به آن، کاربر را به هدفش برساند.
با این حال، هنگامی که نوبت به ایجاد آموزش الکترونیکی(eLearning)می رسد ، باید مشکلاتی را که در استراتژی صفحه اصلی با آنها مواجه میشویم را در نظر بگیریم و بهترین راه حل را پیدا کنیم.
مهمترین ضعف Progressive Enhancement این است که چیزی به عنوان یک طرح جهانی وجود ندارد. تجربه های کاربری در دستگاه های مختلف، متفاوت است. شروع با یک طراحی محدودتر ممکن است اغلب به طرحی توسعه نیافته و نامناسب در ساختارهای مستحکم منجر شود و نتیجه طرحی می شود که از قابلیت های کامل مختص هر دستگاه استفاده نمی کند و می تواند خیلی ساده یا خالی به نظر برسد.
اینجاست که تفاوت بین طراحی تطبیقی و طراحی ریسپانسیو اهمیت دارد. طراحی ریسپانسیو امکان انعطاف پذیری را از نظر چیدمان و ظاهر فراهم می کند. در حالی که طراحی تطبیقی به منزله نیروگاه است. بدین معنا که تمرکز آن روی ساختار اطلاعاتیست که به کاربر نمایش داده میشود .در واقع طراحی تطبیقی باعث می شود هر دستگاه از بهترین قابلیت هایش برای نمایش اطلاعات استفاده کند. این نکته اصلی mobile first design میباشد. طراحی اولیه موبایل به معنای طراحی فقط برای موبایل نیست . شاید انتظار داشته باشید که کاربر در تجربه موبایل به طیف کاملی از عملکردهایی که نسخه دسکتاپ ارائه می دهد دسترسی داشته باشد. با این وجود، مهمترین مورد این است که تجربه کاربری و چیدمان رابط کاربری دستگاه را بهتر کنیم. پس تجربه کاربری و قابلیت های دسکتاپ برای تولید یک طراحی موثر بسیار مهم است.
پنج اصل در طراحی اولیه موبایل
اگر هیچ طرحی جهانی وجود ندارد ، چگونه می خواهیم برای یک طراحی سازگار برنامه ریزی کنیم؟ در اینجا پنج اصل وجود دارد که باید در در نظر بگیرید.
- ساختارهای پر کاربرد را در اولویت قرار دهید.
امروزه همه یک تلفن هوشمند دارند اما همه نیازهای یادگیری را نمی توان از طریق تلفن همراه برآورده کرد. در پست قبلی در وبلاگ “شما قبل از طراحی برای موبایل چه فکری می کنید”، Jill Stanton سؤالات مهمی را بررسی کرده است که قبل از آپدیت کردن کلیه مطالب الکترونیکی (elearning)در تلفن همراه باید بپرسید. یادگیری موبایل(Mobile learning) ممکن است برای سازمان یا مخاطبان آن مناسب نباشد. اگر اکثر یادگیرندگان، آموزش های آنلاین خود را در دفتر بر روی دسک تاپ انجام می دهند بنظر میرسد ابتدا باید طراحی دسکتاپ انجام داد. این بدان معنا نیست که محتوای نسخه موبایل تخریب شود. با این حال، اگر بیشتر یادگیرندگان در درجه اول از یک دستگاه استفاده می کنند، طراحی آن باعث ایجاد تجربه کاربر بهتری در آنها می شود نسبت به طراحی برای ساختارهایی که کمتر استفاده می شوند. به همین ترتیب، یادگیرندگان ممکن است فقط یکبار یا به ندرت، با آموزش خاصی درگیر شوند. ممکن است یادگیرندگان در صورت لزوم، آموزشهای دیگری را نیز لازم داشته باشند، که بارها و بارها در متن های مختلف، مورد بررسی مجدد قرار گرفته اند که نیاز به طراحی سبکتری حس میشود و استفاده سبک تر را منعکس کند. آموزش باید ساده و کارآمد باشد. برای برنامه های کاربردی سنگینتر ، ممکن است که ابتدا روی قابلیت استفاده و قابلیت دید توجه شود ، حتی اگر این به معنای طراحی پیچیده تری باشد. طراحی اولیه موبایل با مینیمالیسم مترادف نیست.
طراحی تجربیات جداگانه ای را در نظر بگیرید.
نیازی نیست به آموزش روی دسکتاپ و آموزش در یک دستگاه تلفن نگاه یکسانی داشته باشیم. در واقع، این می تواند به یادگیرنده امکان شخصی سازی آموزش را با دستگاه اصلی خود بدهد. محتوا و قابلیت های اصلی باید به همان شکل باقی بمانند. اما طرح ها می توانند تنظیم شوند تا از قابلیت های اختصاصی هر دستگاه استفاده شود. نقاط قوت هر دستگاه را در نظر بگیرید و طرح را متناسب با آن را درست کنید.
- طراحی جهانی خود را سفارشی کنید.
با ابزار توسعه سریع ، توانایی ما برای شخصی سازی آموزش افزایش می یابد. حتی اگر تصمیم گرفته اید که موبایل، تبلت و دسک تاپ را به طور کلی نگه دارید ، همچنان می توانید عناصر را برای ساختارهای خاص تنظیم کنید.برای مثال لیست موجود در نسخه موبایل به راحتی می تواند تبدیل به یک جدول داده در نسخه دسک تاپ شود. از امکاناتی که دستگاه ها از نظر فضای صفحه نمایش فیزیکی و از نظر تعامل دارند، استفاده کنید، نسخه رومیزی آموزش شما نباید فقط یک نسخه بزرگ و گسترده از آموزش موبایل باشد.
- جهت گیری و مسیریابی را در نظر بگیرید.
اندازه صفحه نمایش تنها تفاوت بین موبایل، تبلت و دسکتاپ نیست. جهت گیری صفحه نمایش – افقی یا عمودی- نیز نقش بزرگی ایفا می کند. بطور مثال یادگیرنده ای که آموزش را در گوشی هوشمند خود مشاهده میکند احتمالا گوشی را با یک دست و به صورت عمودی نگه می دارد و با انگشت شستش حرکت می کند. در مورد دسکتاپ یادگیرنده به صورت افقی محتوا را مشاهده می کند و به کمک موس یا صفحه کلید در صفحه جابجا می شود. تبلت ها در وسط قرار میگیرند واز طریق لمسی (تاچ اسکرین) قابلیت مشاهده به صورت افقی یا عمودی دارند. . هدف ایجاد محیط قابل استفاده برای یادگیرندگان درساختارهای مختلف می باشد. بزرگترین سوال مسیریابی است. در نظر بگیرید که یادگیرنده چگونه در این دوره حرکت می کند و از چه ابزارهایی – انگشتان دست یا ماوس – استفاده میکند؟ برای موبایل، که یادگیرندگان از انگشت شست دست خود استفاده میکنند تا حرکت کنند ، بهترین کاربری، مسیریابی و عملکرد به سمت پایین یا کنار صفحه است. تبلت ها با موقعیت مشابهی از ویژگی های مسیریابی، بهتر کار می کنند ، اما جهت گیری تغییر می کند. یادگیرنده ممکن است بصورت افقی، در حال مرور دوره باشد، این بار به احتمال زیاد از هر دو دست برای مسیریابی استفاده می کند. با یک یا هر دو انگشت شاخص. حالا یک دسکتاپ یا لپ تاپ را در نظر بگیرید. به احتمال زیاد کاربران انتظار دارند که عملکردهای کلیدی بجای سایدبار صفحه، در بالای صفحه یا به عنوان یک نوار منو در پایین ظاهر شوند .
- تعاملی فکر کنید.
محتوا بین دستگاهها نیازی به تغییر ندارد ، اما تعامل می تواند محتوا را تعیین کند. برای جلوگیری از تغییرات غیرضروری محتوا ، تفاوت در طریقه تعامل یادگیرنده ها با دستگاه ها را در نظر بگیرید.دستگاه ها و تبلت های موبایل عمدتا از انگشت انسان برای ورودی استفاده می کنند. در حالی که برخی از لپتاپ ها به صفحه نمایش لمسی مجهز شده اند، اکثر کاربران هنوز هم برای حرکت به یک موس یا پد لمسی تکیه می کنند.هر دوی موس و انگشت نقاط قوت خود را دارند اما در فرم تعامل بسیار متفاوت اند. هرگونه تعامل ایجاد شده در آموزش الکترونیکی مانند مسیریابی یا فعالیتهای یادگیری باید این اختلافات را پوشش دهد. به عنوان مثال، به دلیل این که موس حالت شناور(hover state) دارد، نکات مربوط به ابزار(tool tips) و دیگر تکنیک های جاوا اسکریپتی(rollover effects) را می توان در رایانه های رومیزی استفاده کرد تا تاثیر خوبی روی یادگیرنده بگذارند. به طور مشابه، فعال سازی دو دکمه ای باعث کنترل آسانتر فهرست های متنی میشود. با این وجود این عناصر طراحی بر روی صفحه نمایش های لمسی، کمتر طبیعی جلوه می کنند. این بدان معنا نیست که دسکتاپ و موبایل به طراحی کامل جداگانه و منحصر به فرد نیاز دارند.
سلکت،درگ و اسلاید را میتوان با تعامل موس و انگشت انجام داد. با این وجود، منوهای ساده و افزایش اندازه دکمه ها یا نقاط مهم هنگام طراحی صفحه های لمسی روی دسکتاپ، ممکن است عاقلانه باشند.
منبع: fredricksonlearning.com
