خوابی سمبلیک درباره فرایند طراحی سایت

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

فهرست مطالب

قبل از خواب

چند وقتی بود که مجذوب سادگی سایت بنیانگذار وردپرس شده بودم.

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

  • اولی Hueman. این قالب سه ستونه شیک و تمیزه رو خیلی ها ممکنه بشناسند. قالبیه که بیشتر به درد مجلات میخوره و میتونه جایگزین رایگانی برای قالب صحیفه و یا جریده باشه. با تعداد بسیار زیادی گزینه های تنظیم قالب.
  • دومی اما قالبی کمتر شناخته شده است به نام Flounder. لحظات ناب بلاگ نویسی رو در این قالب میشه تجربه کرد. این قالب از ساختارهای پست (استاندارد، نقل قول، چت، موسیقی، گالری عکس، …) پشتیبانی میکنه و یک رنگ و آیکون ویژه به هر ساختار قالب اختصاص میده. سبک طراحیش کاملا فلته و نمایی کاملا ساده ولی جذاب داره. و با تعداد بسیار کمی گزینه های تنظیم قالب. حس و حال این قالب من رو برد به یاد روزهای جوانی و بلاگ نویسی در یاهو ۳۶۰ و blogspot. روزهایی که وبلاگ نویسان سعی می کردند بدون غل و غش روایت (narration) و تفسیر منحصر به فرد خوشون از زندگی رو در محیط آزاد اینترنت به اشتراک بگذارند.

درباره خوابها و ماهیتشان

خوابها بنا به ماهیتشان می توانند کاملا انتزاعی و سمبلیک بوده و روایتگر حرفهایی باشند که در بیداری نمی توانیم آنها را به راحتی بیان کنیم. بنابراین اهمیت دادن به آنها و موشکافی دقیق آنها می تواند بسیارمفید باشد. (حاشیه: همینطور به نظر من کسی که بتواند خوب خوابهایش را به یاد بیاورد و آنها را به شیوه درخور و خاص خودشان مکتوب کند، می تواند آثار جالبی به سبک «رئالیسم جادویی» بورخس و مارکز بنویسد)

سه چهار ماهی می شد که می خواستم «فرایند طراحی» سایت را برای کارفرمایان آینده ام، توضیح دهم. این فرایند علی رغم اینکه ساده به نظر می رسد، دارای پیچیدگی های فراوانی است، و بنابراین راحت به تحریر نمی رسید تا اینکه … دیشب یک خواب جالب دیدم، و بر خلاف معمول صبح خیلی زود از خواب بیدار شدم (ساعت ۵!) و حدود یک ربع از جام تکون نخوردم تا خوابم از یادم نره!

اینجور خوابها رو خیلی کم میبینم، وقتهایی که به شدت غرق در موضوعی می شم و به قول مولانا:

چون شدی عطشان بحر معنوی / غرقه شو اندر جزیره مثنوی

و بنابراین قدر این خوابها رو میدونم و مکتوبشون می کنم، برای مثال در داستانک «عاشیقلر و تخم مرغ»


خواب دیشب من

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

سرفصلهای خواب رو می نویسم و یکی یکی به آنها و رابطه آنها با مبحث طراحی سایت میرسم:

۱ – مغازه شلوغ پلوغ عباس پسرخاله

  • مغازه ای پر از آدم (حتی شما خواهرم که زن داداش پسرخالم هم بود تو مغازه بود)
  • مغازه ای پر از خرت و پرت ریز و درشت (حتی یک بشکه قیر هم همون ورودی مغازه بود)

۲- مغازه چهار طبقه با دهنه حدود هشت متر و عمق یک متر

  • مغازه چهار طبقه با دهنه حدود هشت متر
  • عرض کم (حدود یک متر) و یک پیشخوان بزرگ

۳- اولش همش حواسم به سقف مغازه بود که نریزه پایین

۴- پسر سازنده قبلی مغازه به حسن گفت: بابام داره از صبح پلاگین ها رو آپدیت میکنه

۵- سازنده قبلی مغازه به حسن می گفت: کار ۳۰ میلیون تومن بود، تا حالا فقط ۱۵ میلیونشو دادی

۶- حسن پا به پام میومد و از پیشرفت کار لذت می برد


تفسیر خواب

۱ – مغازه شلوغ پلوغ عباس پسرخاله

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

عباس پسرخاله ام، ۴ برادر و یک خواهر داره. خودش حدود ۱۰ تا بچه و چندین نوه داره و خواهر برادرهاش هم اغلب بالای پنج تا بچه دارند. همچنین اونا روابط خانوادگی گسترده ای دارند، بنابراین وقتی همشون یه جا جمع می شوند، یک محیط شلوغ پلوغ و پر سر و صدا و به هم ریخته ایجاد می شه. حالا حساب کنید همشون تو مغازه جمع شدند.

  • مغازه ای پر از آدم (حتی شما خواهر عزیز)
فضای خواب- تا حدی شبیه این تصویر از شهر مومبایی هند
فضای شلوغ مغازه در خواب تا حدی شبیه این تصویر از شهر مومبایی هند بود

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

یاد وقتی افتادم که می خواستم سایت سازمان «برنامه اسکان بشر ملل متحد در ایران»، را از نو طراحی کنم. هرچند در جلسه اعلام برنده مناقصه، فقط دکتر سیامک مقدم، رئیس UN-Habitat ایران و دو نفر از کارشناسانش حضور داشتند، ولی در جلسات اجرا، حدود ده کارشناس خانم و آقا شرکت داشتند، و این فضا را ایجاد کرده بودند:

  1. نظرات کارشناسان بدنه کارفرما، تقریبا کاملا واگرا بود و روی یک مطلب نظر واحدی نداشتند. چرا، چون یکی می خواست سایت شبیه نمونه کشور پاکستان باشد، دیگری شبیه نمونه کشور X و سومی شبیه سایت مرکزی UN-Habitat.
  2. تقریبا هیچ کدام از خواسته هایشان در مدرک RFP طراحی سایت نیامده بود.
  3. از آن بدتر اینکه آنها آشنایی بسیار کمی با مفاهیم طراحی سایت داشتند و نمی دانستند اعمال یک سلیقه خاص در طراحی، می تواند چه عواقبی بر عملکرد (performance)، امنیت سایت و نیز برنامه زمانبندی فشرده اجرای پروژه مطرح شده در RFP داشته باشد!
  4. و از همه بدتر، هیچ کدام از نظرات، مخاطب نهایی سایت را مد نظر قرار نمی داد!
  5. پس از یک مدت طولانی فایل فتوشاپی تهیه و خواسته شد، به دقت پیکسل، فایل PSD مذکور را با html و css پیاده کنم. بدون در نظر گرفتن برنامه زمانبندی اجرای پروژه؛ بحث طراحی ریسپانسیو و تغییر چیدمان عناصر در این نوع طراحی؛ و اینکه با توجه به اینکه محصول نهایی یک سایت داینامیک است، افزودن یک مطلب جدید می تواند این PSD ایده آل را به هم بزند!
سندرم Pixel Perfection
سندرم Pixel Perfection – مواظب باشید در این تله نیفتید! – منبع تصویر: +

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

clients-sometimes-get-angry

بعد هم تصمیم گرفتم در اولین فرصت مطلبی در خصوص «فرآیند طراحی سایت» در سایت وبی لب قرار دهم. کاری که در مجله معتبر طراحی سایت و اپلیکیشن، یعنی مجله Smashing Magazine به طور مداوم در حال انجام است، برای مثال این مطالب: +، ++، +++ و ++++.

  • مغازه ای پر از خرت و پرت ریز و درشت (حتی یک بشکه قیر!)

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

نمونه یه سایت پر از خرت و پرت ریز و درشت (حتی یک بشکه قیر!)
نمونه یه سایت پر از خرت و پرت ریز و درشت (حتی یک بشکه قیر!)

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

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

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

اگر در فصل اول به این اشاره کنید که تفنگی به دیوار آویخته شده است، این تفنگ باید در فصل دوم یا سوم مورد استفاده قرار بگیرد. اگر قرار نیست تیری از آن شلیک شود، نباید به دیوار آویخته شده باشد.

۲- مغازه چهار طبقه با دهنه حدود هشت متر و عمق یک متر

  • مغازه چهار طبقه با دهنه حدود هشت متر

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

  • عرض کم مغازه (حدود یک متر) و یک پیشخوان بزرگ

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

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

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

۳- اولش همش حواسم به سقف مغازه بود که نریزه پایین

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

۴- پسر سازنده قبلی مغازه به حسن گفت: بابام داره از صبح پلاگین ها رو آپدیت میکنه

این هم بر میگردد به اینکه طراح قبلی سایت، که کارفرما از کارش ناراضی بوده، شروع می کند به گفتن  اینکه حالا صبر می کردی من کارت رو درست می کردم … و حتی بدتر از آن، شروع به ایرادات بنی اسرائیلی به کارفرما یاد دادن که به طراح جدید سایت بگو این کار رو بکنه و اون کار رو بکنه!

۵- سازنده قبلی مغازه به حسن می گفت: کار ۳۰ میلیون تومن بود، تا حالا فقط ۱۵ میلیونشو دادی

در خواب دیدم سازنده قبلی مغازه با چوب آتیش روشن کرده و کنارش نشسته، حسن داشت رد می شد که حسن رو صدا کرد و شروع کرد به گله گذاری که کار ۳۰ میلیون تومن بوده، حالا ما سر فامیل بودن تا حالا ازت فقط ۱۵ میلیون گرفتیم. اینجا بود که من رسما شاخ در آوردم. با خودم گفتم، من اینهمه کار رو کار مسلط هستم و کار رو اصولی تحویل میدم، نهایتش ده میلیون تومن می گیرم، اونوقت این آقا بدون هیچ تخصصی سه برابر من پول میگیره!

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

۶- حسن پا به پام میومد

نکته قشنگ کار این بود که حسن هم با من اینور اونور می اومد: بهم کمک می کرد مغازه رو خلوت کنیم؛ مغازه که خلوت شد من شروع کردم طول مغازه رو گام زدن تا اندازه مغازه خوب دستم بیاد و براش برنامه ریزی کنم، با ذوق دوید و برام متر آورد؛ یواش یواش که مغازه خلوت شد و براش توضیح دادم حالا چه کارهایی میشه کرد، کلی ذوق کرد و اون هم شروع کرد بهم ایده دادن.

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

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


جمع بندی و نتیجه گیری

ارتباطات موثر: کلید موفقیت
ارتباطات موثر: کلید موفقیت
  • مدیریت ارتباطات و خصوصا مدیریت ارتباطات با کارفرما

مدیریت ارتباطات پروژه، یکی از حوزه های دانشی است که در استاندارد PMBOK: Project Management Body Of Knowledge به آن پرداخته شده. همیشه مدرسان این دوره ها یادآوری می کردند که ما ایرانی ها بیشتر خودمان را درگیر مباحث فنی کار می کنیم و مهارتهای نرمی مانند اصول مذاکره و تعامل با کارفرما را خوب بلد نیستیم.

من هم به تجربه دیدم، بیشترین لطمه را در کارهایم از همین نقطه دیدم ام.

این امر در مورد ارتباطات درونی سازمان هم صادق است، از جمله در مرامنامه شرکت Automattic (شرکت پیش برنده وردپرس و مالک WordPress.com) آمده است (منبع: + و ++ ):

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

I will communicate as much as possible, because it’s the oxygen of a distributed company.

  • سادگی

به قول سهراب سپهری:

ساده باشیم، چه در باجه یک بانک، چه در زیر درخت

خارجی ها هم بهشه میگن: KISS = Keep It Simple Stupid

خودم هم امروز روی سایت خودم پیاده اش کردم: عبارت وزین و پر طمطراق «پایگاه دانش» رو از منوی بالای سایت برداشتم و همان چیزی رو که بود نوشتم: «وبلاگ».[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

1 دیدگاه دربارهٔ «خوابی سمبلیک درباره فرایند طراحی سایت»

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *