طراحی قالب در پورتال سازمانی     1397/10/25
طراحی قالب و رابط کاربری نیاز اساسی یک پورتال سازمانی می باشد. این نیاز می بایست توسط یک تیم حرفه ای رابط کاربری پاسخ داده شود.

مقدمه

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

طراحی قالب اختصاصی پورتال

اهمیت طراحی قالب و theme اختصاصی در پورتال سازمانی

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

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

حتما بخوانید: استراتژی محتوا در پورتال سازمانی

موضوع دیگری که اهمیت دارد، بحث تجربه کاربری و سهولت استفاده از سیستم توسط مشتری می باشد. همه ما می دانیم که مقوله تجربه کاربری (User Expericene) مجزا از رابط کاربری (User Interface) می باشد. اما موارد زیادی رخ می دهد که تغییر در فرآیند تجربه کاربری موجب تغییر در رابط کاربری ما نیز بشود. فرض کنید چیدمان المان ها زیبا باشد اما کاربردپذیری مناسبی را نداشته باشد. زیبایی لزوما همان عملکرد نیست. کلا در مقوله طراحی تجربه کاربری هم زیبایی و هم عملکرد اهمیت دارد. نهایتا لازم به ذکر است که در طراحی قالب های گرافیکی ما هم با مقوله UX و هم با مقوله UI کار خواهیم داشت.

فرآیند طراحی یک قالب در پورتال سازمانی

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

گام اول، یک تیم قدرتمند طراحی

بخش طراحی هر شرکتی متناسب با نیازهای آن شرکت می باشد. ممکن است اصلا برخی شرکت ها تیم تجربه کاربری نداشته باشند! برخی نیز صرفا از کارشناس رابط کاربری برای همه این کارها استفاده می کنند. اما نکته ای که لازم است بگوئیم این است که یک شرکت اعم از اینکه بزرگ باشد یا کوچک، نیازمند کارشناسان خبره طراحی تجربه کاربری، طراحی رابط کاربری و گرافیست، خواهد داشت. در پاره ای از موارد نیاز به یک interaction designer نیز خواهد بود (برای طراحی افکت های motion که معمولا از نرم افزارهایی مشابه after effect استفاده می شود).

تیم طراحی قالب پورتال

تیم طراحی تجربه کاربری

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

  • استراتژی تجربه کاربری - User experience strategy
  • تحقیق کاربری – User research
  • معماری اطلاعات - Information architecture
  • روانشناسی کاربر - User psychology
  • کاربرد پذیری – Usability
  • طراحی بصری - Visual design
  • تست های تجربه کاربری – UX Tests

تیم طراحی رابط کاربری

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

حتما بخوانید: میز خدمت الکترونیکی چیست؟

اما رابط کاربری یا همان User interface هم نیازمند یک تیم قدرتمند خواهد بود. برخی از شرکت ها به تناسب کارهای خود، این تیم را به دو تیم طراحی وب (UI Design) و برنامه نویس رابط کاربری (Frontend) تقسیم می کنند. البته در مقوله طراحی یک قالب این موضوع کمتر نیاز می شود. اما هنگام توسعه و تولید نرم افزار این مقوله بسیار اهمیت دارد. عمده وظایف متخصصین رابط کاربری شامل موارد زیر می باشد.

ذکر این نکته ضروری است که لزوما همه این تکنولوژی ها ممکن است در طراحی قالب استفاده نشود. برای مثال ممکن است در یک پروژه اصلا فریمورکی مانند Angular استفاده نشده باشد و یا مثلا ممکن است ابزارهایی مانند Bootstrap 4 و UIKit اصلا از ابتدا داخل نرم افزار وجود داشته و کارشناس رابط کاربری صرفا از آنها برای بهبود کار استفاده کند. مشابه تیم تجربه کاربری، قطعا تیم طراحی رابط کاربری نیز لزوما شامل یک کارشناس نیست و ممکن است یک تیم با نفرات بیشتر (به تناسب پروژه ها و نیازمندی ها) آنرا هدایت کند.

  • استفاده از تکنولوژی های مدرن و توسعه یافته وب – HTML5
  • استفاده از CSS3 و تکنولوژی های جدید آن
  • استفاده از زبان برنامه نویسی Javascript
  • استفاده از framework های رابط کاربری (Bootstrap 4 – UIKit – jQuery - Angular)
  • بهینه سازی برای موتورهای جستجو (onpage, technical SEO and Schema)
  • تجربه کاربری (آشنایی با این مقوله به جهت تبدیل طرح به وب)
  • تبدیل طرح وب به قالب پورتال سازمانی
  • انجام تست های فنی پس از انجام کار (Cross Browsering)

گام دوم، تحقیق کاربری و بررسی نیازهای مشتری

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

گام سوم، طرح اولیه - Sketch

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

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

مراحل کلی طراحی در تجربه کاربری

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

اسکچ - Sketch

 

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

اسکچ طراحی شده - وب

اسکچ طراحی شده - اپلیکیشن

گام چهارم، طراحی wireframe

اسکلت و ساختار اولیه وب سایت می باشد و تفاوت آن با اسکچ این است که وایرفریم ها اغلب به صورت نرم افزاری طراحی می شوند. در وایرفریم ها طرح به صورت باکس‌های خاکستری و فریم های ساده دیده می شوند.

نمونه ای از وایرفریم

هماطنور که بیان شد، برای طراحی وایرفریم از نرم افزار استفاده می شود. برخی از این نرم افزارها تحت وب هستند. یکی از بهترین نرم افزارها برای طراحی وایرفریم، نرم افزار axure می باشد. شما در این نرم افزار به راحتی می توانید وایرفریم خود را طراحی کنید. همچنین شما با استفاده از ابزار تحت وب balsamiq نیز می توانید وایرفریم خود را طراحی کنید.

گام پنجم، طراحی prototype و طرح نهایی

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

وایرفریم نمونه های اولیه ارائه یک نمایش با پايبندي بالا از برنامه شما را نشان مي دهد. این مانند یک فايل پيش نمايش است كه با عناصر تجربه كاربر، تعاملات، انیمیشن و هر چیز دیگری که هنگام کلیک کردن روی دکمه ها می خواهید تجربه کنید، غنی شده است.

نمونه ای از یک پروتوتایپ در adobe xd

برای پروتوتایپ هم نرم افزارهای قدرتمندی وجود دارد. تصویری که در بالا می بینید، یک پروژه طراحی اپلیکیشن موبایل در نرم افزار Adobe XD می باشد. این نرم افزار یکی از بهترین نرم افزارهای دنیا برای طراحی پروتوتایپ می باشد. اخیرا کمپانی قدرتمند Adobe آنرا رایگان اعلام کرده است. همچنین نرم افزار قدرتمند Sketch که توسط کمپانی apple ارائه شده، به جرات می توان گفت که بهترین نرم افزار دنیاست اما متاسفانه صرفا در سیستم عامل mac قابل استفاده می باشد. به جز نرم افزارهایی که نام برده شده و تحت وب هم نیستند، می توان از ابزار قدرتمند و تحت وب invisionapp هم استفاده کرد.

گام ششم، تبدیل طرح نهایی به قالب پورتال سازمانی

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

نرم افزارهای prototype در تجربه کاربری

صادقانه بگویم که شیوه اول بهتر است و شما باید سعی کنید قالب خود را به طور کامل ابتدا به وب تبدیل و سپس آنرا به قالب آن نرم افزار خود تبدیل کنید. این نکته قابل درک است که در تمام cms ها و پورتال ها، بدیهی است که یک سری framework و فایل های پیشفرض UI داشته باشد. حتما در طراحی های خود حتما باید به نوع فریمورک UI خود توجه کنید. برای مثال اگر از Bootstrap 4 یا از UIKit 3 استفاده می کنید، به این موضوع توجه کنید که این فریمورک ها یک سری استایل پیشفرض برای همه المان ها در نظر گرفته اند که در پاره ای از موارد نیاز به شخصی سازی آنها خواهد بود.

گام هفتم، انجام تست های فنی

پس از اینکه قالب پورتال سازمانی (یا هر وب سایت یا cms که قصد طراحی قالب آن را داریم) به اتمام رسید، بهتر است برخی موارد را نیز مورد بررسی و مورد آزمایش قرار دهیم.

  • بررسی ریسپانسیوی سایت در نقاط شکست و اصطلاحا Breakpoint های مختلف
  • بررسی شاخص های تکنیکال سئو در طراحی رابط کاربری
  • بررسی لود قالب در مرورگرهای مختلف – Cross Browsering
  • بررسی نهایی قالب طراحی شده و مقایسه آن با لیست نیازمندی های مشتری – RFP

همچنین در صورت درخواست مشتری می توان از تست های تجربه کاربری مانند A/B Test و First click test و EYE Tracking و ... استفاده کرد. موضوع دیگری که مهم است اینجا بیان شود، تائید مشتری است. هرچقدر هم که قالب شما خوب باشد، مشتری این حق را دارد که آنرا ببیند و نظرش را اعلام کند.

جمع بندی

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

مقالات مرتبط

پورتال یا پرتال؟ بالاخره کدام صحیح است!

بازاریابی ایمیلی یا ایمیل مارکتینگ چیست؟

پورتال سازمانی، راهکاری هوشمند برای شهرداری ها و سازمان ها

خرید پورتال سازمانی گران یا راه اندازی cms رایگان!

نیاز به مشاوره دارید؟ با ما تماس بگیرید.

تلفن تماس: 43585-021 واحد فروش پورتال سازمانی