خدمات طراحی UI/UX

بیشتر کار طراحی ما برای نرم‌افزارهایی است که آدم‌ها کل روز با آن کار می‌کنند: کارشناس پشتیبانی که صف تیکت را جلو می‌برد، صندوق‌دار تعمیرگاه موبایل، بازرسی که با یک دست دنبال یک بند از استاندارد جوشکاری می‌گردد. در این نوع نرم‌افزار، زیبایی کمتر از این مهم است که کار پرتکرار با سه لمس انجام شود یا با هشت لمس. صفحه‌های محصولات خودمان، یعنی FanDesk، Mobile Master، Probe361، Fidar MES و FanMail را خودمان طراحی کرده‌ایم و همین رویکرد را به پروژه‌های مشتری می‌بریم.

این خدمت برای چه کسانی است

تیم‌هایی که یک نرم‌افزار سازمانی، محصول SaaS یا ابزار داخلی می‌سازند یا بازسازی می‌کنند، مخصوصاً وقتی باید علاوه بر انگلیسی به فارسی یا عربی هم کار کند. اگر سامانه‌ای دارید که کار می‌کند اما کاربران از آن گله دارند و می‌خواهید قبل از طراحی دوباره بفهمید چرا، این خدمت به کارتان می‌آید.

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

روند کار

1. مشاهدهٔ روند کار فعلی. کنار کسانی می‌نشینیم که با نرم‌افزار کار خواهند کرد، یا می‌بینیم امروز کار را روی کاغذ، واتس‌اپ یا اکسل چطور انجام می‌دهند. هدف پیدا کردن چند کاری است که روزی ده‌ها بار تکرار می‌شود.
2. نقشهٔ صفحه‌ها و وایرفریم. فهرست صفحه‌ها و مسیر رفت‌وآمد بینشان، بعد چیدمان‌های خام. تغییرشان ارزان است و بیشتر تصمیم‌ها همین‌جا گرفته می‌شود.
3. نمونهٔ اولیهٔ قابل کلیک با کد. صفحه‌های اصلی را با React و Tailwind CSS و دادهٔ واقعی‌نما، در هر دو جهت می‌سازیم. چون کد واقعی است، توسعه‌دهنده آن را نگه می‌دارد و شما چیزی را بازبینی می‌کنید که مثل محصول نهایی رفتار می‌کند.
4. تست با کاربر واقعی. چند نفر از تیم شما کارها را امتحان می‌کنند. می‌بینیم کجا مکث می‌کنند و قبل از توسعهٔ کامل اصلاحش می‌کنیم.
5. سنجش بعد از انتشار. Lighthouse برای سرعت، و ضبط نشست و نقشهٔ حرارتی (از Microsoft Clarity استفاده می‌کنیم) برای دیدن کاری که کاربران واقعاً انجام می‌دهند.

چیزهایی که به آن‌ها دقت می‌کنیم

راست‌به‌چپ طراحی می‌شود، نه برعکس. آیکون‌هایی که جهت دارند می‌چرخند، عدد و کد انگلیسی محصول وسط متن فارسی درست خوانده می‌شود و تاریخ جلالی همان جایی است که کاربر انتظار دارد. همهٔ متن‌ها از فایل ترجمه می‌آیند؛ در Fidar MES هیچ متن هاردکدی در رابط کاربری نیست و حتی کد خطاهای API به یک پیام ترجمه‌شده وصل است، نه یک خطای خام انگلیسی.

سرعت هم بخشی از طراحی است. در یکی از صفحه‌های نمونه‌کار خود ما، یک تصویر PNG هشتصد کیلوبایتی بالای صفحه زمان نمایش بزرگ‌ترین محتوا را در تست موبایل به بیش از نه ثانیه رسانده بود، در حالی که نسخهٔ WebP صد کیلوبایتی همان تصویر کنارش بی‌استفاده مانده بود. با جایگزینی WebP این زمان به حدود ۲٫۳ ثانیه رسید و امتیاز کارایی Lighthouse از ۰٫۶۷ به ۰٫۹۸. اصلاح کوچکی بود، ولی برای کسی که با گوشی وارد می‌شود تفاوت بزرگی دارد.

نمونه‌کارهایی که می‌توانید ببینید

در Mobile Master صفحهٔ صندوق فروش برای سرعت پشت پیشخوان طراحی شده، با ورود صوتی برای صندوق‌دار و لینک پیگیری عمومی تا مشتری برای پرسیدن وضعیت گوشی‌اش مدام تماس نگیرد. Probe361 استانداردها را به انگلیسی و با ترجمهٔ فارسی بند‌به‌بند نشان می‌دهد و نوار پیمایش پایین صفحه با یک انگشت شست در دسترس است. FanDesk صف تیکت، زمان‌سنج SLA و گفت‌وگو را در یک صفحه کنار هم می‌گذارد، چون کارشناس کل روز بین این‌ها جابه‌جا می‌شود.

مطالعهٔ بیشتر

• دقت ترجمهٔ دوزبانهٔ استانداردها در Probe361
• هزینهٔ واقعی اداره کردن تعمیرگاه با واتس‌اپ و دفترچه

پرسش‌های متداول

فایل طراحی تحویل می‌دهید یا صفحهٔ کارکردی؟

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

می‌توانید اپی را که دیگران ساخته‌اند بازطراحی کنید؟

بله. با بررسی صفحه‌های فعلی و در صورت امکان مشاهدهٔ چند کاربر شروع می‌کنیم. خروجی می‌تواند فهرست اصلاحاتی باشد که توسعه‌دهندگان شما اعمال می‌کنند، یا کار فرانت‌اند را خودمان انجام می‌دهیم.

چیدمان فارسی و عربی را چطور مدیریت می‌کنید؟

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

تحقیق کاربر انجام می‌دهید؟

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

دسترس‌پذیری هم در نظر گرفته می‌شود؟

اصول پایه بخشی از روش ساخت ماست: کنتراست خوانا، دسترسی با صفحه‌کلید، برچسب واقعی برای فرم‌ها و HTML معنایی. اگر ممیزی رسمی بر اساس یک استاندارد مشخص لازم دارید، از ابتدا بگویید تا برایش برنامه‌ریزی کنیم.

مرحلهٔ طراحی چقدر طول می‌کشد؟

به تعداد فرایندها بستگی دارد. زمان‌بندی را بعد از بررسی اولین فرایند می‌دهیم، نه قبل از آن.