معرفی زبان طراحی مترو

[+Aren]

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

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

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

اینترفیس سایر سیستم عاملهای موبایل

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

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

ایده مترو از کجا آمد ؟

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

اینترفیس های ویندوزفون 7

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

اینترفیس نهایی ویندوزفون 7

اما در نهایت اینترفیس نهایی ویندوزفون 7 مانند شکل زیر شد.

ساده و تمیز

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

Infographic در برابر iconographic

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

خیلی راحت می توان متوجه شد که با این کار خیلی از مسایل کاربردپذیری حل شده است و ارتباط کاربر با دستگاه خود بسیار راحت تر شده است.

ویژگیهای اینترفیس مترو

• تمیز ، سبک ، باز ، سریع
• تایپوگرافی
• متحرک و زنده
• محتوی مهم تر از ظاهر
• قابل اعتماد

تمیز ، سبک ، باز ، سریع

• تجربه کاربر هنگام کار با این اینترفیس سریع و همراه با علاقه می باشد
• کاربر روی کارهای اصلی که میخواهد انجام دهد تمرکز می کند
• کاربر کارهایش را با کمترین کار اضافی انجام می دهد
• اجزای غیر ضروری که کاربر را از هدف خودش دور کند حذف شده است
• از whitespace ها به خوبی استفاده شده است
• از تمام فضای موجود در صفحه استفاده می شود

تایپوگرافی

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

متحرک و زنده

• توسط حرکت کاربر تشویق به انجام عملی می شود
• به محتوی این امکان را می دهد که کاربردپذیرتر باشد
• به محتوی ارائه شده بعد می دهد
• توسط حرکت کاربر می تواند قسمتهای مختلف سیستم را مشاهده کند

محتوی مهم تر از ظاهر

• کاربر از طریق خود محتوی جذب می شود نه از طریق کارهای گرافیکی اضافه
• از المانهای گرافیکی که به محتوی ربطی ندارند کاسته می شود
• خود محتوی همان رابط کاربری می باشد
• کاربر به راحتی می تواند با خود محتوی ارتباط برقرار کند

قابل اعتماد

• طراحی برنامه های مترو متناسب با کارکردشان باید باشد
• نباید اطلاعاتی را که مربوط به برنامه نیست در آن گنجانده شود
• با کاربران باید رو راست باشد و آنچه را که واقعا می تواند در اختیارشان بگذارد باید ارائه دهد

2 نکته مهم در اینترفیس مترو

• ینترفیس مترو روی کاربر و کارهایی که می خواهد انجام دهد تمرکز کرده است
• اینترفیس مترو کمک می کند که اطلاعات و برنامه های کاربر دسته بندی شود