طرح جدید وبسایت

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

تو این طرح سعی کردم که از المان های اضافی که باعث شلوغی صفحه میشه کمتر استفاده کنم و بیشتر تمرکز بر روی اطلاعات اصلی و مورد نیاز باشه.

sgheysar.com

http://sgheysar.com

طراحی اپلیکیشن اندروید و مشکلات آن

چرا باید نگران طراحی اپلیکیشن اندرویدی باشیم؟

اولین موضوعی که هنگام طراحی یک اپلیکیشن موبایل مدنظر طراحان و توسعه دهندگان قرار می گیرد، نوع دستگاه موبایل کاربران است. نمایش درست و استاندارد طرح رابط کاربری اپلیکیشن روی دستگاه های موبایل کاربران، دغدغه اکثر طراحان و توسعه دهندگان موبایل است.

بسته به اینکه اپلیکیشن برای چه پلتفرمی طراحی می شود سختی کار متفاوت است. اگر اپلیکیشنی که در حال طراحی آن هستید مربوط به پلتفرم iOS و یا Windows Phone باشد کار ساده است و جای نگرانی نیست. همانطور که می دانید در iOS و Windows Phone  تعداد و نوع دستگاه ها و همچنین رزولوشن صفحه نمایش آنها محدود و مشخص است. می توان با اطمینان و خیال راحت طراحی کرد. اما در Android مسئله کمی پیچیده تر است. اندروید Open Source است و به همین دلیل رام های کاستم (Custome) زیادی برایش وجود دارد. حدود ۴۰۰۰ دستگاه مختلف اندرویدی با سایز صفحه نمایش متفاوت و ورژن اندروید مختلف وجود دارد که کار را سخت می کند. حال سوالی که برای بسیاری از طراحان و توسعه دهندگان در اینجا مطرح می شود این است که چگونه اپلیکیشنی طراحی کنیم که در همه این دستگاه ها نمایش یکسان و استانداردی داشته باشد؟

۴۰۰۰ دستگاه مختلف اندرویدی!

برای حل این مشکل اول بیایید نگاهی به این ۴۰۰۰ دستگاه مختلف بیاندازیم. همانطور که در تصویر می بینید محبوب ترین گوشی اندرویدی GT-i9100  یا همان Galaxy SII سامسونگ است که با رنگ سبز نمایش داده شده است.

این ۴۰۰۰ دستگاه مختلف اندرویدی مربوط به ۶۰۰ برند مختلف است که در اینجا نیز سامسونگ ۴۰% از سهم بازار گوشی های اندرویدی را به خود اختصاص داده است.

همانطور که در تصاویر بالا دیدید بسیاری از مدل های مختلف دستگاه های اندرویدی وجود دارند که سهم بسیار ناچیزی از بازار را دربرگرفته اند. بسیاری از آن ها کاربران خاص محدود به کشوری خاص را دارند. برای مثال Energy Tablet i724  یک تبلت اسپانیایی است و برای مصارف خاص تولید شده است و کاربران زیادی ندارد.

اما آنچه که کار طراحان رابط کاربری را در مورد این دستگاه های اندرویدی سخت می کند ویژگی های صفحه نمایش این دستگاه هاست:

رزولوشن (Resolution) صفحه نمایش این دستگاه ها که سایز صفحه بصورت (طول*عرض) در پیکسل ها را نشان می دهد، متفاوت است که در نمودار زیر گستردگی و تراکم آن ها را می بینید.

چگالی (Density) صفحه نمایش این دستگاه ها نیز به  (high (hdpi), medium (mdpi), low (ldpi  تقسیم بندی می شوند. چگالی معمولاً تصاویری که ما در طرح استفاده می کنیم را تحت تاثیر قرار می دهد.

سایز صفحه نمایش این دستگاه ها مقادیر متفاوتی را در بر می گیرد. برای مثال گوشی HTC Tattoo با سایز ۲٫۸ اینچ جزء کوچکترین هاست. اما برای سهولت کار سایز صفحه نمایش دستگاه های اندرویدی را در ۴ دسته small، normal، large و extra large قرار داده اند.

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

  • گفتیم که سایز صفحه نمایش این دستگاه ها را به ۴ دسته small، normal، large و extra large تقسیم کرده اند. معمول ترین کاری که طراحان انجام می دهند این است که طرح رابط کاربری اپلیکیشن را در ۴ سایز مختلف آماده کنند تا در هرکدام از دستگاه های اندرویدی نمایش تقریباً درستی داشته باشد. البته به نظر من هیچ وقت نمی توان مطمئن بود که در همه این دستگاه ها طرح یکسانی نمایش داده می شود!
  • رابط کاربری اپلکیشن را حدالمقدور طوری طراحی کنید که طرح هر بخش آن قابل تکرار باشد و در صفحه نمایش های مختلف نیازی به کشیدگی (Stretch) بخش های مختلف و در نتیجه کاهش کیفیت طرح نباشد.
  • پیشنهاد شخصی من این است که تا می توانید از المان های native رابط کاربری در اندروید استفاده کنید. این کار تا حدی خیال شما را از بابت نمایش یکسان طرح در دستگاه های مختلف راحت می کند. بعلاوه استفاده از المان های مخصوص اندروید که کاربر بارها آن ها را دیده و تجربه آشنایی دارد ، باعث راهبری آسان تر کاربر می شود.

اما آیا پشتیبانی کردن تمام کاربران این دستگاه ها الزامی است؟

بیایید روی کاربران هدف خود متمرکز شوید. اغلب کاربران شما چه دسته ای را تشکیل می دهند؟ همانطور که دیدید ۴۰% از بازار دستگاه های اندرویدی را سامسونگ در بر گرفته است. و قسمت عمده گوشی های اندرویدی مربوط به چند برند محدود است. پشتیبانی کردن از تمام دستگاه های اندرویدی قدیمی ضروری نیست، همانطور که امروز بسیاری از طراحان وب پشتیبانی کردن از مرورگرهای قدیمی مانند Internet Exploere6 را بیهوده تلقی می کنند.

ویکی پدیا: مقایسه دستگاه های اندرویدی

androidadvices

اولین همایش نرم افزارهای موبایل و موبایل وب

روز پنجشنبه ۱۷ اسفند اولین همایش نرم افزارهای موبایل و موبایل وب در تهران برگزار شد. من هم در کنار سایر دوستان ارائه ای با موضوع «طراحی رابط کاربری در اپلیکیشن های موبایل» داشتم.

این ارائه مرور اجمالی بود بر مقدمات طراحی اپلیکیشن های موبایل، تفاوت های رابط کاربری وب و موبایل، المان های UI و UX مختص پلتفرم های iOS ، Android و Windows Phone و آینده طراحی اپلیکیشن های موبایل.

فایل پاورپوینت این ارائه : دانلود

انشالله در پست های آینده به طور مفصل تر به مرور این مطالب می پردازم.

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

“مترو” نام زبان طراحی و در واقع فلسفه طراحی است که ابتدا در ویندوزفون۷ و سپس در ویندوز۸ مورد استفاده قرار گرفت. اینکه می گوییم مترو فلسفه ای در پشت رابط کاربری خود دارد به دلیل ویژگی هایی است که مترو با استایل خود به دنیای اپلیکیشن ها آورد. در اینجا می خواهم به برخی از مهم ترین این ویژگی ها اشاره کنم:

ویندوز8

تاکید بر محتوا

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

تعامل،کاربردپذیری،تجربه

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

طراحی تصویری

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

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

اسکایپ برای ویندوزفون۸

بعد نوشت – لازم به توضیح است که لفظ “مترو” برای این استایل به گفته شرکت مایکروسافت دیگر استفاده نمی شود و زین پس به استایل مترو گفته می شود “استایل طراحی ویندوز۸″

کار گروهی

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

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

teamwork

«کار گروهی توانایی انجام کار با یکدیگر بسمت یک هدف مشترک است. توانایی هدایت دستاوردهای فردی به سمت اهداف سازمانی است. این آن چیزی است که به افراد معمولی اجازه رسیدن به نتایج شگفت انگیز را می دهد.» اندرو کارنگی


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

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

بنابراین رعایت بعضی نکات مهم و در عین حال ساده ای در فوتر سایت ضروری است که در اینجا به برخی از آنها اشاره می کنم:

  • اولین نکته ای که باید رعایت کرد این است که فوتر سایت باید از بخش اصلی سایت جدا و قابل تمییز باشد. این کار معمولاً از طریق تفاوت در رنگ فوتر با بقیه قسمت های سایت و یا جدا کردن آن توسط یک خط یا کادر انجام می شود. طوری که در نگاه اول کاربر براحتی بتواند فوتر را تشخیص دهد.
  • طراحی بخش فوتر بهتر است خیلی خاص و گرافیکی نباشد و طراحی ساده ای داشته باشد.
  • فوتر نباید حاوی اطلاعات زیاد و نوشته ها و جملات طولانی باشد.
  • در فوتر به قسمت های «درباره ما» و «تماس با ما» لینک بدهید. اگر فرض کنیم فوتر آخرین بخشی است که کاربر می بیند این مسئله حتماً مفید خواهد بود. اگر بتوانید فرم تماس کوچکی هم در فوتر قرار دهید خوب است. به شرطی که باعث شلوغی فوتر نشود. همچنین می توانید آدرس و شماره تلفن یا ایمیل خود را قرار دهید.

  • فوتر می تواند navigation خوبی برای سایت شما باشد. بعلاوه بسیاری از سایت ها site map خود را در فوتر قرار می دهند. از آنجا که فوتر در انتهایی ترین نقاط سایت قرار دارد، بهترین مکان برای قرار دادنِ site map است. زیرا کاربر پس از اسکرول کردن سایت می تواند براحتی ببیند در کجای سایت قرار دارد.

  • بسته به نوع سایت، در فوتر می توان اطلاعات مفیدی را قرارداد. برای مثال لینک به محصولات مهم یک شرکت در فوتر سایت آن می تواند بسیار کاربردی و باعث افزایش فروش آن شود. بعبارتی در فوتر می توان آن بخش از سایت که باید بیشتر به چشم بیاید و بر آن تاکید شود را قرار داد.
  • همچنین در مورد وبلاگها، قرار دادن آخرین پست های وبلاگ، آخرین کامنت ها، برچسب ها (tag) و دسته بندی مطالب در فوتر می تواند مفید باشد.
  • لینک فید (rss) سایت و شبکه های اجتماعی نیز معمولاً در فوتر قرار می گیرند.
  • قراردادن لینک به بالای صفحه در فوتر مفید است.

  • بهتر است به جای ستون کناری (side bar)، از فوتر استفاده کنید! محتویات و لینکهایی که در ستون کناری سایت قرار می گیرند باعث دور کردن توجه  مخاطب از مطلب اصلی سایت می شود ولی قراردادن آنها در فوتر علاوه بر اینکه باعث تمرکز بیشتر مخاطب بر مطلب اصلی سایت می شود؛ آن را به جا و به موقع به مخاطب انتقال می دهد و به قدر کافی تاثیر خود را می گذارند.
  • فراموش نکنید که اگر شما با مطالب سایتتان باعث جذب بازدیدکننده شده اید، محتویات فوتر می تواند باعث نگه داشتن بازدید کننده و ایجاد ارتباط به جا و به موقع با کاربر شود.

نکاتی درباره طرح جدید وبسایت بانک پاسارگاد

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

طرح قدیمی:

طرح جدید:

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

اما در طرح جدید نکاتی هم هست که قابلیت بهتر شدن را داشت! برای مثال بخش اخبار در هر دو طرح تقریباً در مکان یکسان و قابل توجهی قرار دارد. در حالیکه فکر می کنم بخش اخبار این سایت مهم تر از بخش خدمات کارت نیست! در طرح جدید؛ باکس هایی که برای دسترسی سریع تر به بخش هایی چون خدمات کارت در نظر گرفته شده در بعضی مرورگرها با اسکرول کردن دیده می شوند که اگر در مکان های بالاتری قرار داشت بهتر بود. البته لینک هایی مانند “نظرسنجی” و  یا “دعوت به همکاری” هم از آنجایی که از اهمیت کمتری برخوردارند می بایست در بخش های کم توجه تر قرار می گرفتند و قسمت های مهم تری که مربوط به خدمات است جایگزین این لینک ها می شدند.

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

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

اینها بعضی از نکاتی بود که می خواستم به عنوان یکی از مشتریان ثابت بانک پاسارگاد مطرح کنم تا بهبود و پیشرفت بیشتری را در مورد سایت این بانک شاهد باشیم.

استانداردهای وب

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

سازمان کنسرسیوم جهانی وب (W3C)  معیار هایی رو برای استاندارد وب معرفی کرده و ابزارهایی هم برای تایید استاندارد بودن یک وبسایت داره (+ و +) اما این ابزارها روش درستی برای شناخت یک وبسایت استاندارد نیست! چرا که این ابزارها ممکنه یک وبسایت رو استاندارد معرفی کنه در حالی که نمایش درستی رو در مرورگرهای مختلف نداره! اما من تصمیم دارم تو این پست فاکتور هایی که مد نظر خودم بود (که با بعضی هاشون آشنایید و بعضی هاش هم در عمل برای من و خیلی ها ثابت شده ) رو با هم مرور کنیم:

۱- دسترسی پذیری (Accebility) : اولین و شاید مهمترین مسئله ای که یک سایت استاندارد باید رعایت کنه دسترسی پذیری هست. خودتون رو جای بازدید کننده سایت بذارید و ببینید وقتی وارد سایتی می شوید می تونید براحتی اون چیزی رو که می خواهید پیدا کنید یا نه. آیا در صفحات داخلی براحتی می تونید به بخش های دیگه سایت دسترسی پیدا کنید؟ هرچی بازدید کننده زمان کمتری رو صرف پیدا کردن بخش مورد نظرش بکنه یعنی اینکه سایت دسترسی پذیری بالایی داره و رعایت این مسئله در وبسایت هایی که بخش های گوناگون و تعداد صفحات زیاد دارن مطمئناً دشوارتر و از طرفی از ارزش بالاتری برخورداره!

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

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

۴- نمایش یکسان در مرورگرهای مختلف: اینکه وبسایت مورد نظر در مرورگرهای مختلف نمایش یکسان داشته باشه مسئله بسیار مهمیه که فقط طراحان با تجربه از پس اون بر خواهند اومد! چیزی که این روزها و مخصوصاً تو کشوری مثل ایران که هنوز یوزرها از مرورگر اینترنت اکسپلوور نسخه های قدیمی استفاده می کنند بسیار مهم و حتی حیاتیه!

۵- مجزا بودن طرح وبسایت از محتوا: یک سایت استاندارد باید قسمت محتوای مشخصی جدا از طرحش داشته باشه که در صورت تغییر طرحش محتوای سایت دچار تغییر نشه! این قسمت به درست نوشتن کدهای اچ تی ام ال و سی اس اس بر می گرده و باعث میشه که موتورهای جستجو محتوا رو به درستی شناسایی کنند.

۶- قابلیت رؤیت آیتم های اصلی (Visibility): آیا وقتی وارد صفحه اصلی سایت می شوید در نگاه اول می تونید قسمت های اصلی سایت رو ببینید؟ یا قسمت عمده فضا با آیتم های فرعی و غیر ضروری اشغال شده؟

۷- خوانا بودن مطالب مهم در نگاه اول (Readability) : اگر مطالبی هست که در اولویت اول برای سایت قرار داره باید در نگاه اول به چشم کاربر بیاد. همه می دونیم که کاربر از صبر و حوصله کمی برخورداره! پس باید در نگاه اول مطالب مهم و جذاب بصورت برجسته به نمایش گذاشته بشه تا کاربر رو مجذوب کنه.

به نظرم این ها اصلی ترین فاکتورهایی هست که یک وبسایت استاندارد در قدم اول باید داشته باشه که در مواقعی هم به هم ربط پیدا می کنند. موارد دیگری هم هست که نیاز به دقت بیشتری داره و رعایت همه این موارد باعث میشه تا یک وبسایت استاندارد و در دسترس برای همه داشته باشیم.

گام اول: ریاضت!

شروع مهمه. اینکه چطوری شروع کنید مهم تر. با چه انگیزه و میزان پشتکار و علاقه ای شروع کنید از همه مهم تر!

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

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