/ بایگانی موضوعی / طراحی وب و گرافیک

«طراحی مجدد کلین» و جهت‌گیری تجاری موفق در طراحی وب

/ طراحی وب و گرافیک، ۱۷م مهر ۱۳۸۸

نیما را از همان روز اول که شروع به نوشتن در عمران دو‌ـ‌خال‌ـ‌صفر کردم، می‌شناسم. اهتمامی که او برای یادگیری طراحی وب بصورت حرفه‌ای و با رعایت اصول و استانداردهای پیشنهادی W۳C داشت، همواره برایم قابل تحسین بود. در گیر شدن من با پایان‌نامه‌ی تحصیلی‌ام در ماه‌های اخیر و ایده‌هایی که نیما آن روزها برای راه‌اندازی یک تیم طراحی وب حرفه‌ای در سر می‌پروراند، باعث ایجاد وقفه‌ای چند ماهه در رابطه‌ی دوستانه‌ی ما شده است (من همواره از طرف دوستانم متهم به بی‌مهری و کم‌توجهی بدان‌ها شده و می‌شوم.) امروز متوجه شدم که پروژه‌ی نیما با همکاری دو تن از دوستانش با عنوان «طراحی مجدد کلین» در حال بار نشستن است. جهت عرض تبریک به نیمای عزیز و دوستانش (پرهام و فرشاد) و پرداختن به چند ویژگی تحسین‌آمیز این پروژه با آینده‌ای روشن، لازم دیدم طی نوشته‌ای به طراحی مجدد کلین و جهت‌گیری‌های تجاری هوشمندانه‌ی آن بپردازم.

با وقوع پیشرفت‌های بسیار در سال‌های اخیر در حوزه‌ی تکنولوژی‌های مرتبط با وب، و با معرفی ایده‌های مطرح در دیگر حوزه‌های طراحی از قبیل طراحی چاپ، طراحی گرافیک، تایپوگرافی و … به این حوزه، و تاکید بر «انسان» به عنوان مخاطب اصلی طرح و معرفی مفاهیمی چون کاربردپذیری، دسترسی‌پذیری، معماری اطلاعات و معماری اجتماعی، نظیر آنچه که در حوزه‌ی مهندسی معماری وجود دارد، امروزه ــ حتی این‌جا در ایران ــ شاهد این هستیم که طراحی وب دیگر به عنوان یک سرگرمی و یا تفریح برای نوجوانان علاقه‌مند به دنیای رایانه و اینترنت مطرح نمی‌شود؛ طراحان وب نیز همانند خود وب پا به سن بلوغ گذارده‌اند. در نتیجه، کسانی به عنوان طراح وب موفق شناخته می‌شوند که اولا طراحی را به عنوان شغل اصلی خویش پذیرفته باشند، ثانیا بصورت حرفه‌ای و تمام وقت به یادگیری و مطالعه در زمینه‌ی آخرین دستاوردهای وب بپردازند. بنابر این، لزوم وجود یک طرح تجاری روشن برای طراح و یا گروه طراحان، جهت تضمین موفقیت شغلی آن‌ها ضروری می‌نماید. با این مقدمه می‌پردازم به دو ویژگی مهم پروژه‌ی طراحی مجدد کلین که توجه مرا به خود جلب کرده است.

۱ ایجاد یک عنوان تجاری و هدف‌گیری سهم مشخصی از بازار

متاسفانه در کشور ما اینترنت با یک ابزار تجاری قابل اعتنا فاصله‌ی فراوانی دارد. وجود بی‌میلی در میان ایرانیان در بهره‌گیری از وب در پیشبرد اهداف تجاری خویش سبب گشته است که شاهد تقاضای چندانی از طرف مراکز تجاری در این بستر نباشیم. در کنار عامل فوق، وجود تعداد کثیری از طراحان وب مشتاق در میان هموطنانمان، موجب افزایش رقابت در بازار طراحی وب ایران گشته است. ترفندی که گروه طراحی مجدد کلین برای متمایز نشان دادن خود از سرویس‌های مشابه و افزایش سهم خویش از بازار به کار بسته است، ایجاد یک عنوان (Brand) برای گروه است؛ عبارتی که در اولین بازدید از وب‌سایت گروه با آن مواجه می‌شویم: «ما وب‌سایت کنونی شما را به بهترین نحو مجددا طراحی می‌نمائیم،» البته این بار با رعایت استانداردها و اصول اساسی مرتبط با تجربه‌ی کاربر که گروه بر لزوم رعایت آن‌ها پای می‌فشارد ــ منظور من این نیست که دیگر طراحان این استانداردها و اصول را زیر پای می‌گذارند؛ بحث بر سر ایجاد یک عنوان معتبر، جذب مشتری و افزایش سهم از بازار نه چندان داغ طراحی وب است. وجود چنین عنوانی نه تنها باعث تمایز گروه از سایر طراحان با افزایش اعتبار آن از محل پای‌بندی به استانداردهای حرفه‌ای می‌گردد، بلکه آن دست از مشتریانی را که رضایت لازم از وب‌سایت خویش ندارند، تشویق به سفارشی دیگر برای «طراحی مجدد» وب‌سایتشان می‌شوند.

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

۲ رویکرد پژوهشی‌ـ‌آموزشی به طراحی وب

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

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

همچنین بخوانید

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

Balatarin Donbaleh Mohand.es del.icio.us | یک نظر »

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

/ طراحی وب و گرافیک، ۵م اسفند ۱۳۸۷

اندی کلارک (Andy Clarke)، نویسنده‌ی کتاب پر فروش Transcending CSS: The Fine Art of Web Design، طی مقاله‌ای خلاقانه در وب‌سایت (معرکه‌ی) ۲۴ ways، به معرفی کتاب‌های کمیک (کمیک استریپ) به عنوان منبع الهام بخش برای طراحان وب می‌پردازد. سپس دو نمونه از این ترفند‌های الهام بخش را که طراحان کتاب‌های کمیک از آن بهره می‌برند، به عنوان اثباتی بر مدعای خود پیش روی می‌آورد. این ترفند‌ها، شامل استفاده‌ی نویسنده و یا طراح کتاب‌های کمیک از ابعاد کادرها (پنل‌ها و یا قطعات که تصاویر را در بر می‌گیرند) برای بیان سرعت (و تراکم) وقوع حوادث و ایجاد امکان تمرکز بیشتر خواننده بر روی کادرهای با ابعاد بزرگ، و همچنین استفاده از کادرهای بدون قاب در بین کادرهای قاب‌دار در جهت جلب توجه بیشتر خواننده بر کادر بدون قاب، می‌باشد. من البته این جا قصد تکرار این نکات ظریف را ندارم و توصیه می‌کنم که مقاله‌ی اندی کلارک را قبل از ادامه‌ی نوشته‌ی من مطالعه فرمایید. قصد دارم دو نکته‌ی ظریف از نوع استفاده‌ی طراحان وب از این دو ترفند بیان کنم.

روزنامه‌ی کیهان: شاه رفت

۱

استفاده از فونت (تایپ) بزرگ در صفحات وب، از جمله‌ی روش‌های خلاقانه‌ی طراحی وب است که در چند سال اخیر با معرفی هر چه بیشتر اصول تایپوگرافی (Typography) و طراحی چهارخانه‌ای (Grid design) به طراحی وب، شیوع فراوانی پیدا کرده است. نمونه‌های فراوانی از آن را در وب‌سایت Smashing Magazine (همچنین این نوشته) خواهید یافت. اندی کلارک در مقاله‌ی خود به ترفندی که طراحان کتاب‌های کمیک در استفاده از کادرهای با ابعاد بزرگ به کار می‌گیرند اشاره می‌کند و تاثیری را که این ترفند بر خوانندگان این نوع از کتاب‌ها دارد بیان می‌کند. وجود کادرهای بزرگ در میان کادرهای کوچک در کتاب‌های کمیک سبب می‌گردد که چشم‌های خواننده (خودآگاه و یا ناخودآگاه) زمان بیشتری را صرف مطالعه‌ی تصاویر و نوشته‌های داخل آن کادر بکند. در واقع نویسنده با این ترفند موفق می‌شود که عامل زمان را نیز وارد روایت خود از داستان بکند و از این طریق وقوع حوادث در مدت زمان طولانی را به خوانندگان خود تلقین کند. چنان‌که چندین کادر کوچک کنار هم (که اساسا برای مطالعه‌ی سریع طراحی می‌شوند)، زمان سریع وقوع حوادث و فشردگی آن را تلقین خواهند کرد. اما تاثیر مهمی که این وقفه در تعقیب خط روایی داستان بر خوانندگان دارد، ایجاد فرجه‌ی زمانی بیشتر برای تفکر خواننده بر داستان و در صورت نیاز فراهم آوردن امکان حدس و گمان در خواننده در حین مطالعه‌ی کتاب می‌باشد. فرصتی که به گمان من در داستان‌هایی که بصورت متنی منتشر می‌شوند به سختی فراهم می‌آید (شاید بی‌دلیل نباشد که اکثر داستان‌هایی که بصورت کمیک منتشر می‌شوند روایتی معما گونه و یا پلیسی دارند). همان‌گونه که پیش از این نیز گفتم این ترفند در حوزه‌ی طراحی وب نیز گاها (بخصوص در وب‌سایت‌های موسوم به وب ۲٫۰) مورد استفاده قرار می‌گیرد.

اما گاهی وقت‌ها طراحان وب که از دلایل وجود این گونه شیوه‌های طراحی (استایل‌ها) آگاهی کافی ندارند آن را بگونه‌ای نامناسب به کار می‌گیرند. یک نمونه از این استفاده‌های نابجا، عناوین و یا لوگو (برند) با فونت بزرگ در طراحی صفحات وب می‌باشد — که البته خود من نیز در طرح اولیه‌ی همین وبلاگ مرتکب این اشتباه شده بودم. در صورتی که در حالت معمول هیچ نکته‌ی تامل برانگیز در عنوان سایت‌ها وجود ندارد، اساسا نیازی بر مکث خواننده بر لوگوی وب‌سایت نیست و این ترفند البته هیچ سودی در جهت افزایش کارخوری (Usability) وب‌سایت‌ها ندارد؛ هر چند همگان بر این نکته واقفیم که لوگوی سایت اهمیت زیادی در ایجاد تصویری ماندگار در ذهن بازدیدکنندگان سایت‌ها دارد، ولی فکر نمی‌کنم که نکته‌ی مذکور منافاتی با این مهم داشته باشد. بنابر این بهتر است که این ترفند در صورتی که دلایل کافی در استفاده از آن وجود داشته باشد مورد استفاده‌ی طراحان قرار گیرد. تعداد زیادی از وب‌سایت‌هایی که دچار این اشتباه شده‌اند را در همان دو نوشته‌ی Smashing Magazine که در بالا آورده‌ام، خواهید یافت.

۲

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

Concrete اثر Paul Chadwick

اندی کلارک در مقاله‌ی خود به وجود کادر‌های بدون قاب (Border) در کتاب‌های کمیک در میان کادرهای قاب‌‌دار اشاره می‌کند و به بیان این نکته که چگونه نبود قاب محدود کننده به دور این کادرها، سبب می‌گردد که آن کادر در مقابل دیگر بخش‌های صفحه مشخص‌تر به نظر آید و چنین به نظر رسد که گویی آن کادر — که لزوما ابعاد متفاتی با کادرهای دیگر ندارد — تمام صفحه را در بر گرفته است. در صورتی که روال معمول در طراحی وب ایجاد کادر به دور المان‌های مهم و در خور توجه می‌باشد؛ خود اندی کلارک نیز به این نکته‌ی قابل تامل اشاره دارد. در طرح سایت ادوبی نیز — به خصوص در میان صفحات فرعی سایت مثل صفحه‌ای که به فلش پلیر اختصاص یافته است — متوجه می‌شویم که قسمت سربرگ (Header) وب‌سایت خارج از قابی که سایر بخش‌های صفحه را در بر می‌گیرد، قرار گرفته است. همین امر سبب گشته است که قسمت سربرگ و بخصوص المان پراهمیت نویگیشن (Navigation) در مقابل دیگر قسمت‌های سایت، با وجود جای کمی که اشغال می‌کند پر رنگ‌تر به نظر رسد. در طرح زیبای سایت فونت شاپ نیز شاهد استفاده‌ی زیرکانه از همین ترفند هستیم.

*عکس کمیک استریپ از کتاب Concrete اثر Paul Chadwick؛ بر گرفته از همان مقاله‌ی اندی کلارک.

Balatarin Donbaleh Mohand.es del.icio.us | ۷ نظر »

پاسخ به یک دوست یا چرا من گوگل ریدر را می‌پرستم

/ طراحی وب و گرافیک، ۳۱م اردیبهشت ۱۳۸۷

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

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

Currently most Web sites and Web software have accessibility barriers that make it difficult or impossible for many people with disabilities to use the Web.

– W۳C, Introduction to Web Accessibility

ثانیا من آژاکس بلد نیستم و البته خیلی دوست دارم یاد بگیرم ولی با وجود گرفتاری‌های عدیده‌ای که دارم برنامه‌ای برای یادگیری آژاکس در نظر نگرفته‌ام.

و اما

تاکید من بر لزوم رعایت معیارهای لازم در رابطه با قابلیت دسترسی یک سایت، دلیل بر چشم بستن به تکنولوژی‌های جدید مثل آژاکس و نادیده گرفتن امکانات فوق العاده‌ای که در اختیار ما می‌گذارن نیست. و همان طوری که آقای زاهدی بهش اشاره کردن استفاده از آژاکس، بعنوان نمونه در فرم‌ها و سیستم‌های نظر خواهی، کاربر رو از لزوم انتظار برای بارگذاری مجدد صفحه بی‌نیاز می‌کنه (امکانی که از اون با نام میکرو-آپدیت یاد می‌شه). و خیلی از قابلیت‌های دیگه که اتفاقا همگی برای کاربران هم خوش آیند هستند و هم راحتی رو به ارمغان می‌آورند و از این نظر سطح کاربری سایت رو هم افزایش می‌دهند چیزی که حتی من از اون در مقابل مقوله‌ی زیبایی دفاع کردم. و همون طور که در نوشته‌ی قبلی هم گفتم وب ۲٫۰ بخش بزرگی از پیش‌رفت خودش رو مدیون آژاکس هستش، همچنین به نظر من استفاده از سرویس‌هایی مثل جی‌میل و یا گوگل ریدر بدون وجود آژاکس دیگر هیچ لطفی نخواهد داشت و علاوه بر این بدون وجود آژاکس سرویس‌هایی مثل گوگل مپس و میبو دیگر وجود نداشتند. اما تاکید من به پرهیز از استفاده، در مواردی بود که می‌شود از روش‌های جایگزین استفاده کرد، هر چند با کاهش سطح کاربری. مایلم به این موصوع در دو حالت بپردازم: اولی مربوط می‌شه به معیارهای شخصی من در طراحی (فکر می‌کنم این طوری بگم بهتره :-)) و دومی اصولی که طراحان وب باید خودشون رو ملزم به رعایت‌شون بدونن.

اصولی که من به عنوان طراح وب خود را ملزم به رعایت آن‌ها می‌دانم

گروهی از کاربران وب وجود دارند که امکان پشتیبانی از کدهای جاوااسکریپت رو در مرورگر خودشون مسدود می‌کنند، بنابر این، این افراد به اون دست از فرم‌هایی که اشاره کردی (و یا بسیاری از امکانات دیگه) دسترسی نخواهند داشت –تاکید می‌کنم که این موضوع مسئله‌ای نیست که بتوان از لحاظ دسترسی بهش ایراد گرفت، چون طبیعتا کسی که اقدام به اینکار می‌کنه مسئولیت محدودیت‌هایی رو که برای خودش بوجود می‌آره رو می‌پذيره– این موضوع باعث می‌شه که من خودم «شخصا» بفکر راه‌حل‌های جایگزین در استفاده از این‌گونه امکانات باشم و یا این امکان رو بصورت ترکیبی و در کنار راه حل‌هایی مانند استفاده از کدهای سرورساید در اختیار کاربرهام قرار بدم (مثلا فرمی رو در نظر بگیر که هم از آژاکس برای تایید اولیه‌ی اطلاعات وارد شده استفاده می‌کنه و هم از PHP البته به صورت ابتدایی و با سطح کاربری کمتر). به عنوان یک نمونه‌ی عملی می‌شه به سرویس جی‌میل هم اشاره کرد که به دو صورت آژاکس و HTML طراحی ‌شده.

اصولی که طراحان وب ملزم به رعایت آن‌ها می‌باشند

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

اسکرین ریدرها نرم افزارهایی هستند که توسط افراد نابینا بر روی مرورگرها مورد استفاده قرار می‌گیرند که در واقع محتوای نوشتاری سایت رو به صدا تبدیل می‌کنند (مثل JAWS، ویندو-آی و هال). مشکل اساسی این گونه ابزارها عدم شناسایی صحیح کدهای جاوااسکریپت هستش (نتایج تستی که بر روی این ندم‌افزارها انجام شده رو می‌تونید این جا ببینید) و در کنار اون منوهای کرکره‌ای، منوهای پوشه‌ای و قسمت‌هایی از محتوای سایت که بصورت درجا آپدیت می‌شوند نیز توسط این نرم‌افزارها قابل شناسایی نیستند. البته مواردی مثل استفاده از تصاویر و یا فایل‌های فلش در هدر صفحات، نویگیشن‌ها و یا کپچاها رو هم می‌شه به این لیست اصافه کرد ولی بحث ما فعلا درباره‌ی تکنولوژی‌های جدید و لزوم ارائه‌ی راه حل‌های مناسب برای رفع مشکلات اون‌هاست.

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

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

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee, W۳C Director and inventor of the World Wide Web

حقیقت این که برای رفع مشکلات فوق تلاش‌های زیادی داره انجام می‌گیره. در حال حاضر راه‌کارهای کنسرسیوم وب (W۳C) برای حل مشکل دسترسی سرویس‌های وب ۲٫۰ در قالب WAI-ARIA (Accessible Rich Internet Applications) پیشنهاد می‌شه . همون طور که قبلا هم گفتم در سرویس‌های وب ۲٫۰، عملگرها (مثل دکمه‌ها و یا رابط‌های کنترلی مثل اسکرول‌ها) اغلب توسط اسکریپت‌ها نوشته می‌شوند که ابزارهایی مثل اسکرین ریدرها قادر به تشخیص ماهیت این عملگرها نیستند. در حقیقت WAI-ARIA راه‌کارهایی رو پیشنهاد می‌ده که توسط اون‌ها بشه کارکرد عمل‌گرها رو به اسکرین ریدرها معرفی کرد. ساختار WAI-ARIA خیلی شبیه به نشانه گذاری‌هایی که در XHTML ۱.۱ برای المان‌ها پیشنهاد می‌شه با این فرق که این بار این نشانه‌گذاری‌ها توسط RDF و بصورت دسته‌بندی معنادار (semantic) برای تعیین ماهیت عملگرها استفاده می‌شوند. در حال حاضر در بین مرورگرها فقط فایرفاکس ۳ از WAI-ARIA پشتیبانی می‌کنه و برای رسیدن به نرم‌افزارهای تماما قابل دسترس هنوز راه خیلی زیادی وجود داره که باید طی بشه. برای مطالعه‌ی بیشتر در مورد WAI-ARIA می‌تونید این مقاله به زبان ساده در اِلیست اپارت رو بخونید.

چرا من گوگل ریدر را می‌پرستم

در اون مقاله‌ای که من در نوشته‌ی قبلی هم لینکش رو داده بودم (این جا) آقای جیمز اِدوارد به بررسی سایت فلیکر –که بحق یکی از قابل توجه‌ترین نرم‌افزارهای حوزه‌ی وب ۲٫۰ محسوب می‌شه– پرداختند و بررسی کردند که چطوری توسعه دهندگان فلیکر با استفاده‌ی نابجا از آژاکس سایت‌شون رو برای گروه زیادی از بازدید کننده‌هاشون غیر قابل دسترس کردند. ایشون حتی یک نسخه‌ی تماما قابل دسترس از فلیکر رو طراحی کردند که در اون از هیچ کد جاوااسکریپتی استفاده نشده (می‌تونید این جا امتحانش بکنید). البته این صرفا یک نمونه‌ی شبیه‌سازی شده‌س و مصلم که می‌تونست زیباتر از این هم باشه. علاوه بر این راه‌کار پیشنهادی، توسعه دهندگان فلیکر می‌تونن سرویس‌شون رو در دو نسخه‌ی HTML و آژاکس هم ارائه بدن (راه‌کاری که گوگل در سرویس ایمیل خودش پیش گرفته).

Google Readerمن اما این جا به سرویس فیدخوان گوگل یعنی گوگل ریدر خواهم پرداخت و سه تا از ویژگی‌های قابل ستایش اون رو که در جهت هر چه قابل دسترس کردن این سرویس ارائه شده‌اند، معرفی خواهم کرد.

۱ میانبرهای صفحه‌کلید

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

Google Reader Keyboard Shortcuts

لیست کامل این میانبرها را اینجا ببینید یا این که «?» (همان shift-/) را در صفحه‌کلید خود بفشارید. با کمی تمرین خیلی زود به کار کردن با صفحه‌کلید عادت خواهید کرد.

۲ ذره‌بین گوگل ریدر

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

Google Reader Lens

کافی‌ست کلید «=» (برای افزایش اندازه‌ی نوشته‌ها) و «-» (برای کاهش اندازه‌ی نوشته‌ها) رو در صفحه‌کلید خود بفشارید.

۳ پشتیبانی از WAI-ARIA

همون طور که در بالا هم اشاره کردم WAI-ARIA روش‌هایی رو ارائه می‌ده که توسط اون‌ها توسعه دهندگان وب می‌تونن ماهیت عملگرهای نرم‌افزارهای وب ۲٫۰ را که با استفاده از آژاکس، جاوااسکریپت و تکنولوژی‌های مربوط به اون نوشته شدن، به اسکرین ریدرها معرفی بکنن و قابلیت دسترسی نرم‌افزارشون رو بالا ببرن. یکی از ویژگی‌های بارز گوگل ریدر پشتیبانی از WAI-ARIA هستش. هنگامی که گوگل ریدر را با استفاده از مرورگری که مجهز به اسکرین ریدر می‌باشد (مثل فایر وکس) باز می‌کنید، صدایی شنیده خواهد شد که از شما می‌خواهد برای فعال کردن نسخه‌ی ARIA گوگل ریدر کلیک بکنید، بعد از فعال‌سازی ARIA با فشردن کلید «?» بر روی کیبرد، لیست میانبرهای موجود صفحه‌کلید شنیده می‌شود، سپس از طریق همین میانبرها می‌توانید به فیدهای خود گوش بدهید!

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

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

نتیجه

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

Balatarin Donbaleh Mohand.es del.icio.us | ۶ نظر »

ساده زیباست؛ یا زیبایی به چه کارت می‌آد! ساده خوبه | قسمت اول

/ طراحی وب و گرافیک، ۲۶م اردیبهشت ۱۳۸۷

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

فکر می‌کنم تو یکی از اسناد مربوط به وردپرس بود که خوندم اهمیت طراحی در یک سایت در ۲۰ ثانیه‌ی اول که خودش رو نشون می‌ده چون سایت بعدی فقط به فاصله‌ی یک کلیک با سایت شما فاصله داره. با وجود انبوه وبلاگ‌های فارسی که امروزه در وبلاگستان وجود داره باور بکنید تنها ابزاری که شما به عنوان یک طراح وب برای جلب توجه مخاطبانتون زمانی که برای «لحظه‌ی اول» از سایت‌تون بازدید می‌کنن دارید «یک طرح زیباست» و نه «محتوای سایتتون» (کلی عرض می‌کنم، شاید این گفته درمورد مخاطبان خاص صادق نباشه). من اما پا را از این نویسنده‌ی محترم فراتر خواهم نهاد و به شما خواهم گفت که کارکرد زیبایی در یک سایت فقط به همین ۲۰ ثانیه‌ی اول محدود می‌شه! و بعد از گذشت این چند ثانیه، راحتی مخاطب با سایت شما، کارکرد (Web usability) و قابلیت دسترسی (Web accessibility) سایت شماست که اون رو ترغیب به ادامه‌ی خواندن و بازدیدهای بعدی می‌کنه.

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

۱

سادگی، سادگی، سادگی… هیچ متوجه هستید که همه صداشون در اومده؟ این مطلب رو در ۳۵degree بخونید! من نمی‌فهمم ماها چمون شده، چه اتفاقی افتاده که سادگی دیگه خوب نیست و بدرد نمی‌خوره؟ لطفا وقت بگذارید و کامنت‌هایی رو که بعنوان یک طراح وب پای این مطلب عصرونه گذاشتید رو بخونید و با کامنت‌های مخاطبانتون در اون مطلب بالایی مقایسه بکنید! هدف ما از طراحی این نیست که قدرتمون رو در خلق افکت‌های آژاکسی و فلش به رخ مخاطبانمون بکشیم، مطمئن باشید این جور قدرت نمایی‌ها فقط برای ماهاست که اهمیت داره و اون‌ها حتی متوجه‌شون هم نمی‌شن!

چرا وقتی که می‌تونیم از روش‌های متعدد CSS که در همه جای اینترنت رایگان آموزش داده می‌شن استفاده بکنیم، باز می‌آیم از فلش، جاوااسکریپت و یا آژاکس که استفاده از اون‌ها بخاطر ایرادهایی که از لحاظ دسترسی (چه توسط کاربران و چه توسط موتورهای جستجو) بهشون وارد هست، توصیه نمی‌شه، استفاده می‌کنیم‌. این مطلب رو در Dev.Opera بخونید؛ ما بعنوان یک طراح وب حق نداریم بین تکنولوژی‌های جدید و خیره کننده و بخش عمده‌ای از مخاطبانمون، گروه اول رو انتخاب بکنیم تا این طوری ثابت کرده باشیم که حرفه‌ای هستیم، حرفه‌ای بودن و حرفه‌ای طراحی کردن اصلا به این نیست که، این بستگی به میزان موفقیتمون در ایجاد ارتباط با مخاطب‌هامون داره.

من مخالف تکنولوژی‌هایی مثل آژاکس یا فلش نیستم و حتی اعتقاد دارم وب ۲٫۰ و نرم‌افزارهای مبتنی بر وب سهم بزرگی از پیشرفت‌هاشون رو مدیون این دو تکنولوژی و قابلیت‌هایی که این دو از لحاظ رابط گرافیکی (GUI) برای این گونه نرم‌افزارها بوجود آوردن، هستن. ولی می‌دونم که استفاده کردن از فلش و آژاکس در وبلاگ‌ها و یا سایت‌هایی که نیاز به دسترسی توسط اقشار مختلف جامعه با استفاده مرورگر‌های مختلف و با تنظیمات متفاوت دارن، یک اشتباه بزرگ.

و علاوه بر این، تصور این که افکت‌هایی مثل باکس‌ها، گوشه‌های گرد، سایه‌ها، انعکاس‌های آینه‌ای و آیکون‌های بزرگ جزوی از ویژگی‌های سایت‌های وب ۲٫۰ محسوب می‌شن یک اشتباه مرسوم و تنها دلیلش هم، صرفا همزمانی یک جهش چشم‌گیر در اینترنت با یک مد طراحی همه‌گیر (من بهش می‌گم اسمشینگ زدگی)، که البته گذراست. اگر واقعا با من موافقید که طراحی هنر، لطفا خودتون رو محدود به این نوع کپی کاری‌های کورکورانه نکنید و سعی بکنید با اعتماد بنفس بیشتری روش مخصوص به خودتون رو در طراحی پیش بگیرید.

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

Balatarin Donbaleh Mohand.es del.icio.us | ۷ نظر »