این مقاله ماجرای طراحی صفحه آپلود یه پنله که به کاربرامون اجازه می‌دیم فیلم و سریال‌هاشون رو بارگذاری کنن.
موضوعی که در جمله‌ی بالا نهفته شده که باید بهش توجه کنیم اینه که این پنل برای بارگذاری فایل فیلم و سریاله که حجم بالایی داره و در اکثر مواقع از طریق دسکتاپ بارگذاری می‌شه در نتیجه فقط تو نسخه دسکتاپ میاد و تو موبایل اصلا نمایش داده نمی‌شه.
قبل از اینکه با تیم فنی صحبت کنم سعی کردم یه طرح اولیه بزنم. این کار کمک می‌کنه که یه سری سوال و ابهام برام ایجاد بشه که بتونم جلسه‌ی مفیدتری داشته باشم.
دیدن نمونه خیلی کمک می‌کنه که User Flowهای ممکن رو ببینین. یکی از بهترین فلوهای ممکن مسیر کاربری یوتیوبه که به شدت خوبه. مشابه یوتیوب من هم تصمیم گرفتم که کاربر اول فایل رو بارگذاری کنه و بعدش بره سراغ ورود اطلاعات فیلم و سریال و متناسب با این طراحی کردم. حتی مثل یوتیوب امکان بارگذاری همزمان چند فایل رو هم در نظر گرفتم و با این نمونه‌ها با بچه‌های فنی صحبت کردم.
در این بین متوجه شدم نمی‌صرفه (نه که نشه) که همزمان چند فایل رو کاربر بارگذاری کنه و باید اول اسم فیلم و مشخصات رو اعلام کنه و بعد بارگذاری کنه. همینطور که می‌بیننین در این حالت کل فرضیات من زیر سوال رفت اما من همچنان مصر بودم که ابتدا فایل رو بگیریم و در حین بارگذاری فایل اطلاعات رو بگیریم.
دلیلش هم این بود که احتمال بیشتری وجود داره که فایل انتخابی مشکلی داشته باشه تا اینکه اطلاعاتی که داره وارد می‌کنه مشکل دار باشه پس بهتره در همون ابتدا که فایل رو انتخاب می‌کنه به خطا بخوره تا اینکه کلی تایپ کنه و بعدش بهش بگیم که فایلت مشکل داره.
اینجا بود که دانش برنامه‌نویسی و تجربه قبلیم به کار اومد. قبل اینکه جلوتر بریم لازمه اون نکته‌ی برنامه‌نویسی رو با هم مرور کنیم.
ویدئوی یوتیوب بالا رو که ببینین بیشتر درک می‌کنین که چرا یک دیزاینر (خوب) باید حداقلی از دانش برنامه‌نویسی و سایر علوم مرتبط بدونه.
برای اینکه توضیح بدم چطور شد که هم به خواسته‌های تیم فنی توجه کردم و هم کاربر محور طراحی کردم لازمه تفاوت Server-side و Client-side رو یه توضیحی بدم.
ببینین ما می‌تونیم یه سری کارها رو تو مرورگر کاربر انجام بدیم که باعث بشه سرعت در یه مواردی بیشتر بشه، فشار کمتری روی سرور بیاد و به جای نمایش خطا، از بروز خطا جلوگیری کنیم.
هر چند همه‌ی اینها به معنی از دست دادن امنیه و نمی‌شه تمامی بررسی و تحلیل‌ها رو سمت کاربر (Client-side) و در مرورگرش انجام داد اما برخی کارها شدنیه.
برای اینکه موضوع رو بهتر درک کنین بهتره یه مثالی بزنم براتون. یه بار تو دلیون ما یه مسابقه آنلاین سنگ - کاغذ - قیچی برگزار کرده بودیم و به جای اینکه برنده رو توی سرور مشخص کنیم سمت کاربر بازی تماما انجام می‌شد و نتیجه به سرور پاس داده می‌شد.
نتیجش این شد که همینطور که در این ویدئو جادی می‌بینین کلی کد تخفیف ۵۰ هزارتومانی تولید شده بود که اگر جلوشو نمی‌گرفتیم ما رو به برشکستگی می‌رسوند.
همینطور که گفتم تیم فنی می‌خواست اول اسم و توضیخات فایل بیاد بعد فایل بارگذاری بشه اما من برعکس اینو می‌خواستم پس کاری که کردیم اینه که در ابتدا آدرس فایل رو از رو سیستم می‌خونیم و نگه می‌داریم و در مرحله بعد اطلاعات رو می‌گیریم. و این دو تا رو به ترتیبی که سرور می‌خواد براش می‌فرستیم.
اینجوری هم کاربرمحور طراحی کردیم هم بیزینس محور.
حالا فقط یه نکته‌ی دیگه رو هم باید در نظر بگیریم. اونم اینه که یه وقت فایل خطا نده چون ممکنه که فایلی که کاربر برای بارگذاری انتخاب می‌کنه حجیم باشه یا فرمت مناسبی نباشه و باید جلوی این کار رو گرفت.
تو مقاله‌ی کوتاه در مورد Poka-yoke گفتم که جلوگیری از خطا از نمایش خطا مهمتره. اینکه موقع انتخاب فایل برای آپلود فقط فایل‌های مجاز رو نشون بدی هم یکی دیگه از مثال‌های پوکا یوکه است.
اینجاست که بررسی سمت کاربر مهم می‌شه. همینطور که گفتم ما می‌تونیم در ابتدا بدون اینکه چیزی به سرور پاس بدیم فایل انتخابی رو بررسی کنیم و در اگر مشکل داره در لحظه خطای متناظر رو بدیم بدون اینکه چیزی سمت سرور ارسال بشه.
با جستجوی تیم فنی وبسایت mediainfo رو پیدا کردیم که دیتاهای فایل رو سمت کاربر نشون می‌ده و اینجوری متوجه خطا بشیم.
همینطور که تو ویدئوی "چیزهایی که یک طراح باید از برنامه‌نویسی بداند" گفتم خیلی وقت‌ها که من دنبال چیز به خصوصی هستم شخصا سرچ می‌کنم و کد آماده‌ی اون چیزی که می‌خواهم رو پیدا می‌کنم و بعد متناسب با اون طراحی رو انجام می‌دم.
به عنوان مثال من دنبال یه Drag and Drop هستم برای آپلود فایل برای React در نتیجه چیزی که سرچ کردم این بود:
و در نهایت تو یکی از نتایج رسیدم به مقاله‌ی Create a drag-and-drop component with the HTML Drag and Drop API که طرح زیر رو داشت.
همین رو فرستادم برای تیم فنی و اونها هم بدون اینکه حتی UI آمادشه شده باشه با high-fidelity wireframe زیر که زده بودم کار رو شروع کردن و قبل از پایان وقت کاری این قابلیت سمت کاربر پیاده شده بود.
الان دیگه طرح اولیه به همراه توضیحاتی که جدا آماده کردم آمادست که بره برای Backend که پیاده سازی بشه.
یکی از این توضیحات اینه که در مورد فایل به بررسی مرورگر کاربر اکتفا نکنه و خودش هم جوانب احتیاط رو رعایت کنه و اگر در فایل مشکلی وجود داره به همراه متن خطای مرتبط برگردونه که به کاربر نمایش بدیم.
اینجوری امنیت رو هم در کنار سرعت داریم و چیزی رو فدای دیگری نکردیم. به علاوه که با گرفتن فایل در ابتدا Mental Model کاربر یوتیوب برای ما هم رعایت شده و اول فایل رو می‌فرسته بعد اطلاعات رو تکمیل می‌کنه.
اینم اضافه کنم که برای طراحی بهتر درگ اند دراپ مقاله‌ی Drag–and–Drop: How to Design for Ease of Use رو هم خوندم که به شما هم پیشنهاد می‌دم.
