۱۰ ماه از زمانی که Page Builder Sandwich را به صورت عمومی عرضه کردیم می‌گذرد. اکنون حدود ۶,۰۰۰ نصب فعال داریم و این برای ما یک دستاورد بزرگ محسوب می‌شود. همچنین بازخوردهای بسیار زیادی به خاطر آن دریافت کرده‌ایم، هم خوب و هم بد. با این حال، نظر مشترک این است که کاربران از آسان بودن ساخت چیدمان‌ها و ایجاد محتوای خود در مقایسه با سایر صفحه‌سازهای موجود لذت می‌برند.
بخش بزرگی از بازخوردهایی که دریافت کردیم، درخواست‌های مربوط به ویژگی‌های جدید بود و ما در چند ماه گذشته تعداد زیادی از این ویژگی‌ها را اضافه کرده‌ایم. اما هم‌زمان با انجام این کار، کم‌کم در طول مسیر شروع به تغییر رابط کاربری نیز کردیم. و در نتیجه، تجربه کاربری را هم تغییر می‌دادیم… که متأسفانه روندی رو به افول بود. کار به جایی رسید که لازم بود در رابط کاربری تجدید نظر کنیم، زیرا دیگر به سادگی و روانی کار نمی‌کرد و ویژگی‌های مختلف نیز با آن همخوانی و هماهنگی نداشتند.
رابط کاربری از کار افتاده
در نسخه‌های قبلی PBS، می‌خواستیم همه چیز به شکل دکمه باشد. چرا؟ چون کار با دکمه‌ها آسان است. شما فقط… روی آنها کلیک می‌کنید. در نسخه‌های قدیمی‌تر بخش بازرس یا Inspector (نوار کناری در تصویر بالا)، کلیک روی یک دکمه مقدار را افزایش می‌داد و فشردن shift+کلیک روی دکمه مقدار را کاهش می‌داد. این کار به اندازه کافی ساده به نظر می‌رسد. اما با اضافه شدن گردونه‌ها (carousels)، زبانه‌ها (tabs)، نقشه‌ها و سایر المان‌ها و قابلیت‌های جدید، همه آن دکمه‌ها تبدیل به ملغمه‌ای از آیکون‌های گوناگون با طراحی‌های متفاوت شدند و نوعاً بیشتر شبیه به خط هیروگلیف به نظر می‌رسیدند تا یک رابط کاربری جذاب. این موضوع برای کاربران باتجربه مشکلی نبود، اما اگر با PBS تازه کار باشید، نگاه کردن به آن بسیار گیج‌کننده و رعب‌آور است.
مورد بعدی، چند مشکلی بود که در اینسپکتور ظاهر شد. ایده اولیه این بود که همه چیز ساده و در دسترس درون اینسپکتور باشد. و منظورم از همه چیز، واقعاً همه چیز بود – از تبدیل متن به تیتر گرفته تا تغییر رنگ پس‌زمینه، رنگ فونت و هر چیز دیگری که فکرش را بکنید. با این حال، در وضعیت فعلی‌اش، اینسپکتور اکنون شامل گزینه‌های زیادی است که باعث می‌شود دائماً از چرخ ماوس برای اسکرول به بالا و پایین استفاده کنید. کاملاً متفاوت از آن اینسپکتوری که قبلاً امیدوار بودم برای کاربران بسازم.
در نهایت، اخیراً نگاشت کد کوتاه (shortcode mapping) را برای افزونه‌های محبوب شما. این ویژگی ما را ملزم می‌کرد فیلدهای متنی، اسلایدرهای عددی، چک‌باکس‌ها و انواع گزینه‌های جدید اضافی را ایجاد کنیم که برای لذت‌بخش‌تر کردن تجربه ویرایش کدهای کوتاه شما لازم بود. در ابتدا ایده خوبی بود و بله، دستکاری کدهای کوتاه را برای شما آسان‌تر کرد. اما باز هم، این ویژگی از رابط کاربری «فقط دکمه» ما منحرف شد. در بازنگری به گذشته، واقعاً غیرممکن بود که فقط از دکمه‌ها برای تغییر ویژگی‌های کدهای کوتاه استفاده شود. حالا، در آخرین نسخه، ما به دو نوع کنترل رسیدیم: دکمه‌ها و فیلدهای کد کوتاه.
چند دلیل دیگر نیز وجود داشت که باعث شد به این نتیجه برسیم که رابط کاربری ما دیگر کارآمد نیست (یا برای نیازهای ما مناسب نیست)، اما نکات بالا موارد اصلی بودند. با این حال یک چیز همیشه قطعی بود: می‌دانستیم که باید رابط کاربری را به‌روزرسانی کنیم.
تعریف نحوه کارکرد ایده‌آل یک صفحه‌ساز
به جای اینکه بلافاصله دست به کار شویم و چیزها را تغییر دهیم، صد قدم به عقب برگشتیم تا نگاهی به کل تجربه صفحه‌ساز بیندازیم. ما می‌خواستیم جان تازه‌ای به این رابط کاربری ببخشیم. راستش را بخواهید، نمی‌خواستیم سال به سال به بازسازی دوباره آن ادامه دهیم. این کار خسته‌کننده است و مسلماً کمک قابل توجهی به جامعه وردپرس نمی‌کند. این بار تصمیم گرفتیم کارها را به آرامی و با دقت انجام دهیم. ما تمام زوایای Page Builder Sandwich و آنچه آن را به یک صفحه‌ساز خوب تبدیل می‌کند بررسی کرده‌ایم، و در نهایت کل تجربه ویرایش را به چند مفهوم اصلی شکل دادیم.
مفهوم اساسی شماره ۱: تایپ مستقیم در محتوا برای ویرایش
یکی از دلایل اصلی نصب صفحه‌ساز، رهایی از محدودیت‌های ویرایشگر متنی بخش مدیریت (backend) وردپرس است. موضوع این نیست که ویرایشگر بک‌اند خوب نیست، بلکه هنگام ایجاد صفحات وب، بلافاصله ظاهر صفحه وب را آن‌طور که برای بازدیدکنندگان سایت نمایش داده می‌شود به شما نشان نمی‌دهد، و همچنین به شما اجازه نمی‌دهد محتوای خود را خارج از یک طرح تک‌ستونه بچینید. شما فقط می‌توانید متن خود و برخی تصاویر را در آنجا ببینید، اما هیچ‌کدام از موارد پیچیده‌تر (مانند فرم‌های تماس) را نمی‌بینید. بله، می‌توانید کدهای کوتاه را اضافه کنید، اما آنها به شکل رندرشده و نهایی خود نمایش داده نمی‌شوند*.
* افزونه‌هایی توسط دیگران برای رفع این مشکل ساخته شده‌اند، مانند Shortcake UI، اما این موضوع جداگانه‌ای است.
اینجاست که صفحه‌سازهای فرانت‌اند وارد میدان می‌شوند. آنها تجربه ویرایش را از بخش مدیریت خارج کرده و به فرانت‌اند می‌آورند، به طوری که شما سایت خود را به همان شکلی ویرایش می‌کنید که بازدیدکنندگان واقعاً آن را خواهند دید. همان‌طور که پیپین (Pippin) بیان می‌کند: هر چه می‌بینید همان را دریافت می‌کنید (WYSIWYG).
نکته خوب دیگر در مورد ویرایشگر فرانت‌اند این است که به شما امکان می‌دهد متن خود را مستقیماً ویرایش کنید. تایپ مستقیم در تیترها و پاراگراف‌ها، راحتیِ استفاده از یک واژه‌پرداز معمولی را در ساخت وب‌سایت به ارمغان می‌آورد. متن دکمه‌ها و برچسب زبانه‌ها نیز باید به سادگی با کلیک روی آنها و تایپ کردن قابل تغییر باشند.
این همان بخشی است که بیشتر صفحه‌سازهای دیگر در آن عملکرد خوبی ندارند. اکثر آنها شما را مجبور می‌کنند درون یک فیلد متنی تایپ کنید تا همه چیز را ویرایش نمایید. باز هم تکرار می‌کنیم، در صفحه‌سازهای واقعیِ فرانت‌اند نباید چنین باشد. تایپ و ویرایش مستقیم متن از نسخه ۲ نقطه قوت Page Builder Sandwich بوده است و ما مطمئن شدیم که این ویژگی در نسخه ۳ نیز همچنان حفظ شود.
مفهوم اساسی شماره ۲: بهره‌گیری از ماوس برای تغییرات سریع
ماوس ابزار قدرتمندی است که اغلب در صفحه‌سازها نادیده گرفته می‌شود. اغلب اوقات، صفحه‌سازها از آن فقط برای این استفاده می‌کنند که افراد بتوانند آیتم‌ها را بکشند و در مکان‌های مختلف رها کنند (drag & drop)، یا روی دکمه‌ها و فیلدهای ورودی کلیک کنند. اگرچه این خوب است، اما از نظر صفحه‌سازی کارهای بسیار بیشتری می‌توانید با ماوس انجام دهید.
به عنوان مثال، بازخورد بصری فوق‌العاده‌ای در استفاده از ماوس به عنوان ابزاری در ویرایش صفحه وجود دارد، به ویژه در تنظیم ویژگی‌های بصری مانند حاشیه‌ها (margins)، فاصله‌های درونی (paddings) و اندازه‌ها. اکنون، بهینه‌سازی و تنظیم المان‌های شما به یک تجربه طبیعی تبدیل می‌شود.
در نسخه ۳ PBS، شما قادر خواهید بود موارد متعددی را با استفاده از ماوس خود تنظیم کنید. می‌توانید حاشیه‌ها/فاصله‌های بین المان‌های جداگانه، فاصله‌های درونی داخل ستون‌ها و همچنین اندازه تصاویر، آیکون‌ها و نقشه‌ها را تنظیم کنید. همچنین دکمه‌هایی را که به شما اجازه می‌داد مقادیر عددی را تغییر دهید، با اسلایدرها جایگزین کرده‌ایم.
مفهوم اساسی شماره ۳: متن باید به آسانی استایل‌دهی شود
اگر یک قدم از مانیتور خود فاصله بگیرید، متوجه خواهید شد که بیشتر آنچه به صفحات وب خود اضافه می‌کنید محتوای متنی است. بله، ما تصاویری و آیکون‌هایی برای همراهی با آنها داریم – و اخیراً تمایل داریم تصاویر بزرگ‌تری به سایت‌های خود اضافه کنیم. اما بخش عمده محتوای مهم همگی متن هستند: تیترها، فهرست‌های بالت‌دار، پاراگراف‌ها، نقل‌قول‌ها و غیره. در کنار آن، نحوه استایل‌دهی به متن متناسب با طراحی‌هایمان قرار دارد. ما یا اندازه و رنگ آنها را تغییر می‌دهیم، یا آنها را پررنگ (بولد) یا کج (ایتالیک) می‌کنیم. این کار برای خواناتر شدن، مرتبط‌تر شدن و جذاب‌تر شدن محتوای ما برای خوانندگان مربوطه‌مان است.
از آنجایی که ما مکرراً به متن‌ها استایل می‌دهیم، دکمه‌هایی که به ما امکان تغییر استایل‌ها را می‌دهند باید بسیار در دسترس باشند. آنها نباید در یک جعبه پاپ‌آپ پنهان شده باشند که لازم باشد ابتدا آن را باز کنیم. بیشتر صفحه‌سازها از این معضل رنج می‌برند. برای اینکه رابط کاربری آنها به عنوان «خلوت و مرتب» برچسب‌گذاری شود، حتی پرکاربردترین گزینه‌ها از دید مستقیم پنهان می‌شوند.
برای حل این مشکل، ما به پرکاربردترین واژه‌پردازها نگاهی انداختیم. متوجه شدیم که آنها معمولاً یک ردیف با دکمه‌های بسیار در نزدیکی بالای صفحه دارند که برای قالب‌بندی متن استفاده می‌شود و همان طرح‌بندی را برای نسخه ۳ الگوبرداری کردیم. اکنون ما یک ردیف از تمام دکمه‌های استایل‌دهی متن داریم که همیشه در بالای صفحه شما حاضر است. این کار استایل‌دهی را واقعاً سریع کرده و آن را به بخش جدایی‌ناپذیر عادات ویرایش متن شما تبدیل می‌کند.
مفهوم اساسی شماره ۴: گزینه‌های پیشرفته استایل باید انعطاف‌پذیر و در عین حال قابل فهم باشند
نکته اساسی در مورد یک صفحه‌ساز این است که باید به کاربران اجازه دهد طرح‌های خیره‌کننده‌ای را به راحتی خلق کنند. این بدان معناست که ما باید بدون تحمیل یک منحنی یادگیری دشوار، تنظیمات و گزینه‌های متنوع زیادی را فراهم کنیم. امکان تنظیم مارجین‌ها، پدینگ‌ها و استایل‌دهی به متن عالی است، اما این‌ها فقط تا حد مشخصی کارایی دارند. برای انجام درست کار به گزینه‌های بسیار پیچیده‌تری نیاز دارید، گزینه‌هایی مانند تصاویر پس‌زمینه، الگوها (patterns)، کادرها (borders)، پس‌زمینه‌های ثابت (fixed backgrounds) و موارد دیگر. قرار دادن تمام این تنظیمات مختلف بر روی هم می‌تواند کمی گیج‌کننده باشد، بنابراین برخی از آنها را ساده کرده و در دسته‌بندی‌هایی سازماندهی کرده‌ایم تا در نسخه ۳ همه چیز کاربرپسندتر شود.
مفهوم اساسی شماره ۵: پشتیبانی از کد کوتاه (Shortcode)
در نهایت، فراموش نکنیم که صفحه‌ساز ما بر پایه وردپرس استوار است. ما باید این پلتفرم و ویژگی‌های آن را بپذیریم و آنها را محدود نکرده یا از آنها منحرف نشویم. یک ویژگی بزرگ که وردپرس ارائه می‌دهد کدهای کوتاه هستند. این بدان معنا نیست که کل محتوا باید از کدهای کوتاه تشکیل شود – که این کار باعث بی‌نظمی می‌شود – بلکه ما باید به سادگی با آنها سازگار باشیم. بسیاری از افزونه‌ها و قالب‌ها از کدهای کوتاه استفاده می‌کنند و اگر همه آنها را نادیده می‌گرفتیم، ضایعه بزرگی بود. در واقع، کدهای کوتاه هنگام ایجاد صفحات بیشترین انعطاف‌پذیری را به کاربران می‌دهند.
ما چند هفته پیش سیستم نگاشت کد کوتاه خود را معرفی کردیم و به همین دلیل صدها کد کوتاه از صدها افزونه را نگاشت کرده‌ایم. ما محبوب‌ترین افزونه‌های موجود در دایرکتوری افزونه‌های وردپرس را در اولویت قرار داده‌ایم، بنابراین این احتمال وجود دارد که در سایت‌های خود با آنها مواجه شوید. این قابلیت تنها در نسخه ۳ تقویت شده است و ما به بهبود آن در مسیر پیش رو ادامه خواهیم داد.
نتیجه‌گیری
ما تمام این ویژگی‌های اساسی ذکر شده را گرفته و آنها را در نسخه ۳ Page Builder Sandwich پیاده‌سازی کرده‌ایم. این بهترین صفحه‌سازی است که تاکنون برای وردپرس ساخته‌ایم. استفاده از آن بصری‌تر و طبیعی‌تر است، عملکرد سریع‌تری دارد، استفاده از آن آسان‌تر است و صمیمی‌تر و کاربرپسندتر از همیشه شده است.
اگر در مورد یکی از ویژگی‌های ضروری یک صفحه‌ساز نظری دارید، با ارسال نظر در زیر با ما در میان بگذارید.