อยากรู้มั๊ยว่า เราลงทุนโฆษณาไปเป็นแสนเป็นล้านเนี่ย สื่อไหน ได้ผล สื่อไหนไม่ได้ผล เพื่อช่วยให้เราประหยัดเงินค่าโฆษณา หรือ ทำให้เลือก ลงทุนได้อย่างมีประสิทธิภาพสูงสุดในครั้งต่อๆไป

คลิปเสียง

เริ่มต้นด้วย อธิบาย เบื้องต้นก่อนว่า Traffic Source ปกติที่เป็น default ของ Analytics นั้น มีอยู่ 3 ตัวครับ ได้แก่

Direct – การเข้าโดยพิมพ์ URL โดยตรง หรือ ผ่านทาง Bookmark
Referral- การเข้าโดยการอ้างอิงจากเว็บไซต์อื่น
Search – การเข้าผ่านทาง search engine แบ่งเป็น organic และ cpc

หลุดจาก 3 ตัวนี้ไปแล้ว ถ้าเราอยากวัดผลเพิ่มเติมละ เช่น

อยาก วัพผลโฆษณาจาก หนังสือพิมพ์ จากป้าย จากวิทยุ จาก social media ที่ฮอตฮิต อย่าง facebook, twitter ละจะทำยังงัย?

คำตอบคือ เราก็สร้างตัวแปรขึ้นมาวัดผลเองเลยครับด้วย URL Builder ซึ่งสามารถวัดได้ทุกสื่อที่เราจะทำเลย ขั้นตอนการสร้าง URL Builder เข้าไปที่ URL Builder เพื่อนๆ จะเห็นหน้าตาแบบรูปด้านล่าง

สิ่งที่จำเป็นต้องใส่มี 4 ส่วนครับ

1. Website URL ก็คือหน้าที่เราต้องการวัดผล
2. Campaign Medium สื่อที่ใช้ เช่น Banner, radio, social
3. Campaign Source ชนิดของสื่อ เช่น ถ้าสื่อคือ social ชนิดของสื่ออาจจะเป็น twitter, facebook
4. Campaign Name คือชื่อ campaign ของเราครับ

ยกตัวอย่างจากด้านบน สื่อที่ผมใช้ คือ radio ชนิดของสื่อที่ใช้ ก็คือ mcot และเพื่อให้รู้ว่า คลื่นไหน ก็เลยตั้งชื่อ Campaign ว่า 100-5 ตามชื่อคลื่นวิทยุเลยครับ เมื่อกด Generate ก็จะได้ URL ออกมายาวๆ ดังรูป step ที่ 2 ครับ

ซึ่งจะเห็นว่ายาวมาก เพื่อนๆ คงมีคำถามว่า แล้วใครจะไปจำได้?
วิธีแก้ ง่ายๆ ครับ เราก็นำไปทำ Redirect URL ถ้ายังต้องการให้คนจดจำแบรนด์ของเราอยู่
หรือถ้าไม่ซีเรียส เอาไปทำ Short URL ด้วยบริการฟรีๆ ต่างๆ อย่างเช่น bit.ly ได้เลยครับ

เทคนิคเล็กๆน้อยๆ ที่ทำให้คนอยากเข้าเว็บไซต์เรา แม้ว่า จะมี URL ที่ยาวกว่าเดิม

เราจะต้องทำให้เค้ารู้สึกว่า สินค้าหรือบริการที่เราเสนออยู่นี้ มัน Exclusive เฉพาะเค้าจริงๆ ครับ
อาจจะเป็น แจกส่วนลดพิเศษ หรือมี ข้อเสนอสุดพิเศษ บางอย่างที่ทำให้เค้าไม่อยากจะพลาดไป

เช่นครับ ผมทำธุรกิจเกี่ยวกับ ขายเสื้อผ้าผู้หญิงน่ารักๆ แล้วจะลงโฆษณาใน แมกกาซีน วัยรุ่น Teenmagazine
เว็บไซต์ผมคือ www.mydomain.com   หลังจากทำ URL Builder และผ่านการทำ URL Redirect ก็จะกลายเป็น www.mydomain.com/teenmagazine

คำโฆษณาในแมกกาซีน ของผม คือ
รับส่วนลด 50% ทันที พิเศษสุดสำหรับ คุณผู้อ่าน นิตยสาร Teenmagazine เท่านั้น เฉพาะ 50 ท่านแรก
สนใจคลิก link www.mydomain.com/teenmagazine นี้เลย

ทีนี้เมื่อเราทำ URL ใหม่ที่มีการ track ทุกสื่อที่เราอยากจะวัดแล้ว นำไปโปรโมท หรือโฆษณาซักพัก คำถามต่อไปก็คือว่า
เราจะดู Report ได้ในส่วนไหน?

เข้าไปดูในส่วน ของ Traffic และ all traffic ได้เลยครับ เพื่อนๆ จะเห็น source/medium ที่ตัวเองสร้างไว้เลย

อย่างในรูป จะเห็นว่า ผมวัดผลทุกสื่อ โฆษณา banner ที่ลูกค้าไปลงไว้ และจะเห็นว่าเราสามารถดู metric ต่างๆ ได้แบบปกติเลย ก็จะทำให้เราเข้าใจพฤติกรรมของผู้เยี่ยมชม ที่มาจากแต่ละแหล่งที่มามากขึ้น หรือถ้าเรามีการกำหนดเป้าหมายไว้ เราก็สามารถทำ custom report เพื่อดู ว่า สื่อไหนที่ ทำกำไรให้เรามากที่สุดครับ

ดังนั้น ทุกสิ้นเดือน ก็เพียงแค่มาตัดสินใจว่า เดือนต่อไป เราจะเลือกลงทุนในสื่อไหนดี โดยดูจาก report แล้วก็ตัดสินใจจากงบที่ลงทุน เทียบกับ Goal Completions ดังนั้นเราอาจจะตัดสื่อที่ไม่มีคุณภาพทิ้งไป หรือ เพิ่มงบประมาณในสื่อที่มีคุณภาพให้มากขึ้น เท่านี้ เราก็จะสามารถจัดการงบประมาณโฆษณาได้อย่างมีประสิทธิภาพ และค้นพบสื่อโฆษณาในฝันที่ลงเงินเท่าไร ก็มีแต่กำไรแล้วครับ

ลองนำไปประยุกต์ใช้กันดูนะครับ.

อันที่จริง Gutenberg Diagram เป็นหลักจิตวิทยาง่ายๆ ของมนุษย์ (เผ่าพันธ์ที่อ่านจากซ้ายไปขวา) ที่ถูกฝึกสอนให้มีการอ่านในรูปแบบซ้ายไปขวาและบนลงล่างจนฝังลึกไปเป็นสัญชาติญาณ

ในแวบแรกที่มองหน้าจอ มนุษย์จำพวกนี้จะ “โฟกัส” จุดสนใจของสายตาที่มุมบนซ้ายของหน้าจอเป็นอันดับแรก และจะไล่สายตาจากจุดดังกล่าวเป็นเส้นทแยงมุมไปที่มุมล่างขวาของเลย์เอาท์ ภาพด้านล่างเป็นแผนผัง Gutenberg โดยภาพซ้ายเป็นแผนผังสำหรับคนอ่านจากซ้ายไปขวา ส่วนภาพขวาสำหรับพวกขวาไปซ้าย (ญี่ปุ่น, จีน)

จุดบนซ้ายที่เป็นจุดที่เด่นที่สุดตามทฤษฏีของ Gutenberg เราเรียกกันว่าจุด POA (Primary Optical Area) จุดล่างขวาที่เป็นจุดสิ้นสุดของสายตา เรียกกันว่าจุด TA (Terminal Area) ข้อมูลที่อยู่ในเส้นทางของสายตาระหว่าง POA ไปยัง TA จะซึมเข้าสู่หัวสมองของผู้อ่านได้มากกว่าส่วนที่เหลือ ซึ่งก็คือมุมบนขวาและล่างซ้าย ซึ่งเราเรียกกันว่าจุดอับ (Fallow Area) และระหว่างสอง Fallow Area นี้ มุมบนขวาจะได้รับ Attention จากผู้อ่านมากกว่ามุมล่างซ้าย ถ้าหากปัจจัยขององค์ประกอบอื่นๆ (สี, lead graphics, ขนาดตัวอักษร) เท่ากัน

พอเห็นพฤติกรรมทางจิตวิทยาของผู้อ่านเป็นแบบนี้แล้วเราจึงมีแนวทางการออกแบบที่สอดคล้องกับพฤติกรรมดังกล่าว โดยเราสามารถแบ่งพื้นที่ของหน้าจอออกเป็นสี่ส่วน (4 Quadrants) และให้น้ำหนักการออกแบบของแต่ละส่วนหนักเบาให้สอดคล้องกับทฤษฏี Gutenberg

เช่น…

• ควรจะวางโลโก้/จุดสนใจ ไว้ ณ จุดบนซ้าย เพื่อดึงความสนใจของผู้อ่านในการจดจำแบรนด์ให้ได้มากที่สุด
• จุด TA เป็นตำแหน่งที่สามารถปิดการขายได้อย่างมีประสิทธิภาพ (ติดต่อเรา, ดาวน์โหลดเดโม, โทรสั่งซื้อวันนี้)
• ตำแหน่งล่างซ้ายในหน้าเว็บเพจ ถือเป็นจุดอับที่สะดุดตาคนน้อยที่สุดตามหลักของ Gutenberg เมื่อรู้อย่างนี้เราต้องระวังการจัดวางคอนเทนต์ให้ดี Goal ที่สำคัญของเพจไม่ควรไปอยู่ในมุมล่างซ้ายถ้าไม่จำเป็น
• หากต้องการเน้นเนื้อหาที่ส่วน Follow Area ต้องสร้างความโดดเด่นด้วยองค์ประกอบอื่นๆ เช่นการเล่นสีที่แตกต่าง การใช้ตัวอักษร หรือ Movement ของกราฟฟิคที่น่าสนใจ

เรามาดูตัวอย่างเว็บเพจที่ออกแบบตามหลัก Gutenberg ดูบ้าง ลองสังเกตตำแหน่งโลโก้ รวมไปถึงการวางตำแหน่ง Goal หลักๆ ของเว็บไซต์นะครับ

แต้ท้ายที่สุดผมคงต้องบอกว่า Gutenberg Diagram ไม่ใช่สูตรสำเร็จของการจัดวางองค์ประกอบเว็บไซต์ สิ่งที่เราจะได้เรียนรู้จาก Gutenberg ก็คือแนวคิดตามจิตวิทยาของมนุษย์ และแนวทางพื้นทางในการสร้าง Attention กับเว็บไซต์ เช่น หากองค์ประกอบต่างๆ บังคับให้ข้อมูลส่วนสำคัญของเราไปอยู่ที่ Fallow Area ก็ควรจะสร้างจุดเด่นอื่นที่ฉีกหนีองค์ประกอบต่างๆ เพื่อทำให้องค์ประกอบดังกล่าวมีความโดดเด่นและดึง Attention ของสายตาผู้อ่านได้ดีกว่าเดิม

นอกจากนี้สิ่งที่เราต้องเรียนรู้คือความเป็นจริงที่ว่า การอ่านหนังสือนั้นสายตาของเราจะเริ่มสนใจ ณ จุด POA ก่อนเสมอ แต่เว็บไซต์ไม่ใช่หนังสือ ดังนั้นในบางกรณีการจัดองค์ประกอบของเว็บไซต์ที่ขัดกับ Gutenberg Diagram กลับมีประสิทธิภาพ นั่นเนื่องมาจากว่า สมองของผู้เข้าชมไม่ได้ตีความหน้าจอดังกล่าวเป็นหน้าหนังสือ แต่อาจเป็นโปสเตอร์ หรือบิลบอร์ด ซึ่งจะทำให้ POA เปลี่ยนไปเป็นกึ่งกลางภาพโดยอัตโนมัติ

ใครไม่เชื่อใน Gutenberg Diagram เราสามารถทำการทดลองได้โดยการใช้เครื่องมืออย่าง Google Website Optimizer เพื่อวัด Attention ของผู้เข้าชมได้ โดยการออกแบบเลย์เอาท์เว็บไซต์สองประเภทและทดสอบกับผู้เข้าชมจริง ว่าสอดคล้องกับทฤษฏีของ Getenberg หรือไม่ (สิ่งที่ทีมงานของเราเคยทดสอบก็คือ การวางไอคอน “สมัครสมาชิก” ไว้ณ ตำแหน่ง Fallow Area นั้นทำให้มียอดสมาชิกน้อยกว่าตำแหน่ง TA ถึงประมาณ 300%)

ปิดท้ายกันด้วยข้อมูลเพิ่มเติมว่า ทฤษฏีของ Gutenberg จะเหมาะสมและมีประสิทธิภาพสูงสุดกับเว็บไซต์ที่มีอาการ Information Overflow นั่นก็คือ ข้อมูลท่วมจนไม่รู้ว่าอันไหนเด่นอันไหนด้อยไปกว่ากัน ส่วนในกรณีเว็บไซต์ที่มีข้อมูลไม่มาก เราอาจจะมองไม่เห็นศักยภาพของทฤษฏี Gutenberg อย่างชัดเจนนัก

หลังอ่านโพสนี้จบน่าจะเข้าใจเหตุผลที่ระบบ Search ของเว็บไซต์ Apple ไปอยู่ที่มุมบนขวามากขึ้นนะครับ (คลิกไปอ่านโพสได้ที่นี่)

สำหรับในบทความนี้จะใช้ Android 2.3 Gingerbread ในการทดสอบแอพกันนะครับ หลังจากนั้นให้เราเริ่มสร้างโปรเจคของเราบน Eclipse กันเลยนะครับ ตามนี้เลยครับผม (^_^)

หลังจากที่เราสร้างโปรเจคเป็นที่เรียบร้อยแล้ว ขั้นตอนต่อไปจะเป็นการสร้างส่วนของ UI เพื่อให้โปรแกรมของเราได้มีส่วนที่ใช้สำหรับติดต่อกับผู้ใช้งาน โดยให้เราเปิดไฟล์ Main.xml กันเลย โดยเราจะออกแบบดังนี้

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/txtContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="@string/textContent"
android:textSize="40dp" />

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >

<RadioGroup
android:id="@+id/rbGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp" >

<RadioButton
android:id="@+id/rbSizeUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:paddingLeft="40dp"
android:text="@string/textUp" />

<RadioButton
android:id="@+id/rbSizeDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="40dp"
android:text="@string/textDown" />
</RadioGroup>

<Button
android:id="@+id/btnChange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:text="@string/textButton" />
</LinearLayout>

</LinearLayout>

และให้ทำการแก้ไขในส่วนของ String เพื่อใช้งานในแอพของเรา ให้เปิดไฟล์ strings.xml ขึ้นมาแก้ไขกันตามนี้เลย

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="textContent">แอนดรอยเป็นระบบปฏิบัติการของมือถือชนิดหนึ่ง
ซึ่งถูกคิดค้นและพัฒนาขึ้นมาโดย Google Inc.</string>
<string name="app_name">FontThai</string>
<string name="textUp">Size +</string>
<string name="textDown">Size -</string>
<string name="textButton">เปลี่ยนขนาด</string>

</resources>

ทดสอบแอพกันหน่อยดีกว่าว่าหน้าตาของแอพเราจะออกมาเป็นแบบนี้กันหรือเปล่า

จากนั้นเราจะทำให้แอพเราสามารถเพิ่มและขยายขนาดของตัวอักษรกันก่อนดีกว่า ให้เปิดไฟล์ FontThaiActivity.java  แล้วเพิ่มโค๊ดต่างๆ ลงไป

package com.ai.fontthai;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.TextView;

public class FontThaiActivity extends Activity {

   // กำหนดตัวแปร fontSize เพื่อใช้กำหนดขนาดของตัวอักษร
   private float fontSize = 40;

   // กำหนดตัวแปรเพื่อใช้ผูกเข้ากับคอนโทรลในหน้าจอ
   private RadioButton rbSizeUp;
   private RadioButton rbSizeDown;
   private Button btnChange;
   private TextView txtContent;

   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      // ผูกตัวแปรเข้ากับคอนโทรล
      rbSizeUp = (RadioButton) findViewById(R.id.rbSizeUp);
      rbSizeDown = (RadioButton) findViewById(R.id.rbSizeDown);
      btnChange = (Button) findViewById(R.id.btnChange);
      txtContent = (TextView) findViewById(R.id.txtContent);

      btnChange.setOnClickListener(new OnClickListener() {

         public void onClick(View v) {
            //เรียกใช้งานฟังก์ชั่นเพิ่มลดขนาดตัวอักษร
            changeTextSize();
         }
      });
}

   //ฟังก์ชั่นตรวจสอบว่าผู้ใช้งานต้องการเพิ่มหรือลดขนาดตัวอักษร
   protected void changeTextSize() {

      // ตรวจสอบเมื่อมีการคลิกที่คำสั่งเพิ่มขนาดตัวอักษรหรือลดขนาดตัวอักษร
      if (rbSizeUp.isChecked()) {
         txtContent.setTextSize(fontSize++);
      } else {
         txtContent.setTextSize(fontSize--);
      }

   }
}

ทดสอบแอพดูอีกครั้งว่าทำงานได้ตามที่ต้องการหรือไม่ ถ้าได้ตามที่เราต้องการกันแล้วต่อไปจะเป็นการเปลี่ยน Font ในแบบที่เราต้องการกันต่อเลยละกันนะครับ

ให้เราสร้างโฟลเดอร์ขึ้นภายในโฟลเดอร์ Asset แล้วตั้งชื่อว่า fonts จากนั้นก็ให้เรา Copy ไฟล์ Font ของเรามาไว้ในโฟล์เดอร์นี้

เมื่อเราเตรียม Font ที่ต้องการใช้งานเสร็จแล้ว ต่อไปก็จะเป็นการกำหนดให้ ข้อความของเราใช้งาน Font ที่เราเตรียมไว้ โดยให้เราแทรกคำสั่งลงไป ดังนี้

Typeface _font = Typeface.createFromAsset(getAssets(), "fonts/angsai.ttf");
txtContent.setTypeface(_font);

โดยผมจะเพิ่มไว้ก่อนที่จะทำการ Set Event ให้กับปุ่มคำสั่งของเรานะครับ ซึ่งจะอยู่ใน Method OnCreate นะครับ ข่างล่างนี่จะเป็นคำสั่งทั้งหมดที่อยู่ในไฟล์ FontThaiActivity.java นะครับ

package com.ai.fontthai;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.TextView;

public class FontThaiActivity extends Activity {

   private float fontSize = 40;

   private RadioButton rbSizeUp;
   private RadioButton rbSizeDown;
   private Button btnChange;
   private TextView txtContent;

   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);

      rbSizeUp = (RadioButton) findViewById(R.id.rbSizeUp);
      rbSizeDown = (RadioButton) findViewById(R.id.rbSizeDown);

      btnChange = (Button) findViewById(R.id.btnChange);
      txtContent = (TextView) findViewById(R.id.txtContent);

      Typeface _font = Typeface.createFromAsset(getAssets(), "fonts/angsai.ttf");
      txtContent.setTypeface(_font);

      btnChange.setOnClickListener(new OnClickListener() {

      public void onClick(View v) {
      // TODO Auto-generated method stub
         changeTextSize();
      }
   });
}

  protected void changeTextSize() {
      if (rbSizeUp.isChecked()) {
         txtContent.setTextSize(fontSize++);
      } else {
         txtContent.setTextSize(fontSize--);
      }

  }
}

ลองนำเอาไปประยุกต์ใช้กันดูนะครับ อาจะมีประโยชน์ไม่มากก็น้อยนะครับ

“https://graph.facebook.com/me/friends?limit=5”

Batch คือการ call graph api หลายๆ คำสั่งพร้อมกันในเวลาเดียวกันทั้งการ GET POST PUT เราสามารถที่จะดึงข้อมูลจาก หลายๆ object เช่น ดึงข้อมูลของตัวเราเอง และข้อมูลรายชื่อของเพื่อนมาด้วย

curl \
-F 'access_token=…' \
-F 'batch=[ \
{"method": "GET", "relative_url": "me"}, \
{"method": "GET", "relative_url": "me/friends?limit=50"} \
]'\

https://graph.facebook.com

จากตัวอย่างข้างบน ผลลัพธ์ที่ได้จะมาในรูปแบบของ JSON ประกอบไปด้วย code , status , header , body โดย body จะเป็น string ของ JSON object

[
    { "code": 200,
      "headers":[
          { "name": "Content-Type",
            "value": "text/javascript; charset=UTF-8" }
      ],
      "body": "{\"id\":\"…\"}"},
    { "code": 200,
      "headers":[
          { "name":"Content-Type",
            "value":"text/javascript; charset=UTF-8"}
      ],
      "body":"{\"data\": [{…}]}}
]

การใช้งาน batch request แบบ multiple methods

เราสามารถใช้ batch request ได้หลาย method พร้อมกันตัวอย่างเช่น เราต้องการดึงข้อมูลของตัวเราเองพร้อมด้วย การ post ข้อความไปยังหน้า wall ของเรา ก็สามารถทำได้

curl \
–F 'access_token=…' \
-F 'batch=[ \
{ "method": "POST", \
"relative_url": "me/feed", \
"body": "message=Test status update&link=https://developers.facebook.com/" \
}, \
{ "method":"GET", \
"relative_url":"me" \
} \
]'\

https://graph.facebook.com

ผลลัพธ์ที่ได้

[
    { "code": 200,
      "headers": [
          { "name":"Content-Type",
            "value":"text/javascript; charset=UTF-8"}
       ],
      "body":"{\"id\":\"…\"}"
    },
    { "code": 200,
      "headers": [
          { "name":"Content-Type",
            "value":"text/javascript; charset=UTF-8"
          },
          { "name":"ETag",
            "value": "…"
          }
      ],
      "body": "{\"data\": [{…}]}
    }
]

การอ้างอิงระหว่าง request ที่ส่งไป

ในบางกรณีเราต้องดึงข้อมูลจาก facebook มาก่อนจากนั้นค่อยนำข้อมูลที่ได้ส่งไปยัง facebook อีกรอบเพื่อจะให้ได้ข้อมูลที่ต้องการจริงๆ อย่างเช่น
ต้องการข้อมูลของเพื่อนที่อยู่ในรายชื่อของเรา
request อันแรกจะเป็นการดึงรายชื่อเพื่อนมา 5 คน จากนั้นส่งต่อให้ request อันที่สองเพื่อดึงข้อมูลของเพื่อนแต่ละคนออกมา uid ของเพื่อนที่ได้จาก request อันแรก

* name คือชื่อที่ใช้ในการอ้างอิงของ request

curl \
   -F 'access_token=...' \
   -F 'batch=[{ "method": "GET", \
                "name" : "get-friends", \
                "relative_url": "me/friends?limit=5", \
              }, \
              { "method": "GET", \
                "relative_url": "?ids={result=get-friends:$.data.*.id}" \
              }]' \

https://graph.facebook.com/

ผลลัพธ์ที่ได้ จะมาในรูปแบบของ JSON

[
    null,
    { "code": 200,
      "headers":[
          { "name":"Content-Type",
            "value":"text/javascript; charset=UTF-8"}
      ],
      "body":"{\"data\": [{…}]}}
]

จากตัวอย่างจะเห็นว่า request อันแรกจะได้ค่ามาเป็น Null เพราะ request เป็น ผลลัพธ์ไว้สำหรับ request ต่อไปจึงไม่มีการ return ค่ามาให้ แต่เราสามารถสั่งให้ฝั่ง Facebook ส่งค่ามาให้ด้วยโดยการเพิ่ม “omit_response_on_success”:false ใน request ได้

ทีนี้มาดูคำแนะนำของทาง Google กันครับว่า เราควรจะทำ SEO สำหรับเว็บไซต์ในเวอร์ชั่นสำหรับมือถือ (Mobile Site) ของเรายังไง ให้ถูกใจอากู๋เค้าครับผม

บอกให้ Google รู้ว่าเว็บเราก็มี Mobile Site นะ (Notify Google of mobile sites)

ปรับแต่งเว็บสำหรับมือถือเพื่อให้ Google มาเก็บ Index ได้อย่างถูกต้อง (Configure mobile sites so that they can be indexed accurately)

เนื่องจากว่าการงานเว็บผ่านทางพวกโน๊ตบุ๊กหรือว่าพีซีปกตินั้น จะแตกต่างกับการใช้งานเว็บไซต์ผ่านทางมือถือ เนื่องด้วยขนาดของหน้าจอมือถือมันเล็กกว่ามาก ดังนั้นข้อมูลหรือว่าเนื้อหาต่างๆ บนเว็บนั้น ก็ควรจะถูกทำให้แสดงแตกต่างกัน ระหว่างเวอร์ชั่นที่ใช้บนพีซี กับเวอร์ชั่นที่ใช้แสดงบนมือถือครับ พูดอีกแบบนึงก็คือ User Experience ของผู้ใช้เว็บมันแตกต่างกันนั่นเองครับ

มั่นใจว่าเว็บที่เป็น Mobile Site ของเราถูกเก็บไว้ในฐานข้อมูลของ Google (Verify that your mobile site is indexed by Google)

วิธีการเช็คก็ง่ายๆ ครับ ให้เราเข้าไปที่ Google ที่เป็น Mobile Search ครับ (http://www.google.com/m/) แล้วก็พิมพ์ site:yourdomain.com (Google เรียกว่า site: operator) เข้าไปตรงช่องที่ให้ใส่คำค้นหาครับ ถ้ามีเว็บของเราขึ้นมาก็แสดงว่าไม่มีปัญหาอะไร แต่ถ้าไม่เจอเว็บของเราล่ะ (ก็งานเข้ากันเลยซิครับ) ให้พวกเราลองเช็คดูตามนี้ก่อนครับ

1. Googlebot อาจจะไม่สามารถไต่มาเจอเว็บ Mobile Site ของเราได้ (Googlebot may not be able to find your site) วิธีนึงที่ควรทำก็คือ สร้าง Mobile Sitemap แล้วก็ Submit ไปที่ Google Webmaster Tools เหมือนกับการทำ SEO สำหรับเว็บเวอร์ชั่นปกติเลยครับ (อ่านเพิ่มเติมได้ในข้อแนะนำการทำ SEO โดย Google ตอนที่ 3: Improving Site Structure ครับ)
2. เป็นไปได้ว่า Googlebot ไม่สามารถเข้ามาเข้าถึงเว็บ Mobile Site ของเราได้ครับ (Googlebot may not be able to access your site) คือบางทีนักพัฒนาอาจจะไม่อนุญาติให้พวก Robots ทำการเข้าถึงเว็บ Mobile Site ได้ ซึ่งทาง Google จะใช้ชื่อเรียก Robot ที่จะคอยไต่ไปตามเว็บ Mobile Sites ต่างๆ ว่า “Googlebot-Mobile” ก็ให้เราทำการแก้ไขแล้วก็ยอมให้ไอ้เจ้า Robot ตัวนี้สามารถเข้าถึงเว็บ Mobile Site ของเราได้ก็เป็นอันเรียบร้อยครับ

เช็คให้ดีว่า Google สามารถเข้าใจแล้วก็อ่านพวกเนื้อหาต่างๆ ที่อยู่ในลิงค์ Mobile Site ได้ (Verify that Google can recognize your mobile URLs)

คือปกติเราจะใช้ HTML เป็นภาษามาตรฐานสำหรับการสร้างหน้าเว็บเพจ ทีนี้ถ้าเป็นเวอร์ชั่น Mobile Site ก็จะมีพวก XHTML Mobile หรือ Compact HTML เพิ่มเข้ามาเป็นต้น นักพัฒนาเว็บไซต์ก็ต้องใช้ให้ถูกต้องตามมาตรฐานที่เค้ามีมาให้นะครับผม (อ่านเพิ่มเติมได้ที่ Mobile Webmaster Guidelines)

เข้าเว็บผ่านทางมือถือ ก็ควรต้องเป็นเว็บเวอร์ชั่น Mobile Site นะ (Guide mobile users accurately)

เว็บปกติสำหรับคนเข้าผ่านทางเดสก์ทอป ส่วนคนเข้าเว็บผ่านทางมือถือก็ต้องเป็นเวอร์ชั่นสำหรับมือถือ (Running desktop and mobile versions of your site)

ทีนี้ปัญหามันจะเกิดขึ้นก็ต่อเมื่อ 1. เราเข้าเว็บผ่านทางมือถือ แต่ดันเปิดไปเจอหน้าเว็บแบบปกติ หรือว่า 2. เราเข้าเว็บผ่านทางโน๊ตบุ๊คหรือว่าเดสก์ทอป แต่ดันไปเจอเว็บที่เป็นเวอร์ชั่นสำหรับมือถือซะนี่

ทีนี้มาดูข้อแนะนำที่เราควรทำกันครับ

ถ้าเข้าเว็บผ่านมือถือก็ควร Redirect ไปยังเว็บที่เป็นเวอร์ชั่น Mobile Site (Redirect mobile users to the correct version)

นักพัฒนาเว็บไซต์ก็ควรจะทำการเช็คก่อนว่าเราเข้าเว็บไซต์ผ่านทางอุปกรณ์อะไร แล้วก็ทำการ Redirect ไปยังเว็บที่เป็นเวอร์ชั่นที่ถูกต้องสำหรับอุปกรณ์นั้นๆ ครับ

ปรับเปลี่ยนเนื้อหาให้เข้ากับการใช้งาน (Switch content based on User-agent)

ในกรณีที่เรามีเว็บไซต์ที่ออกแบบมาให้สามารถใช้งานได้ ทั้งในเวอร์ชั่นที่เป็นเดสก์ทอป แล้วก็ที่เป็นพวกอุปกรณ์มือถือต่างๆ ด้วย เช่น การนำเทคนิคที่เรียกว่า Responsive Design มาใช้ในการออกแบบเว็บไซต์ ซึ่งวิธีการนี้เราไม่จำเป็นต้องทำการ Redirect ไปยังหน้าเว็บที่เป็นเวอร์ชั่นสำหรับมือถือ (ในกรณีที่เข้าเว็บผ่านทางมือถือ) แต่เทคนิคนี้จะทำการปรับแต่งรูปแบบการแสดงเนื้อหาของเว็บให้เข้ากับขนาดหน้าจอของอุปกรณ์ต่างๆ ได้เองโดยอัตโนมัติ (ซึ่งเทคนิคนี้กำลังเป็นที่นิยมเป็นอย่างมากในตอนนี้ เนื่องจากประหยัดเวลา และต้นทุนในการพัฒนาเว็บไซต์ได้ เมื่อเทียบกับการพัฒนาเว็บขึ้นมาอีกเวอร์ชั่นนึงที่เป็น Mobile Site โดยเฉพาะ)

*หมายเหตุ: ตรงส่วนของย่อหน้าด้านบนนี้ ไม่ได้มีอยู่ในต้นฉบับ Search Engine Optimization Starter Guide แต่เป็นส่วนเสริมที่ผมเห็นว่าเป็นสิ่งที่ผู้อ่านควรรู้จักถึงเทคนิคการออกแบบเว็บไซต์ที่เรียกว่า Responsive Design กันครับผม

ครับเป็นอันเรียบร้อยสำหรับข้อแนะนำต่างๆ สำหรับการทำ SEO สำหรับเว็บที่เป็น Mobile Site นะครับผม ส่วนในโพสหน้าผมจะมาเขียนถึงวิธีการโปรโมทเว็บไซต์ของเรารวมไปถึงการวิเคราะห์ข้อมูลต่างๆ บนเว็บไซต์ของเราด้วยครับผม

ขอบคุณที่ติดตามครับ สำหรับเพื่อนๆ พี่ๆ น้องๆ ที่มีคำแนะนำหรือจะติชม ก็สามารถคอมเม๊นท์มาได้เลยนะครับผม ขอบคุณมากเลยครับ

หลักการมีดังนี้

1. Load Page แม่ตามรูป
2. กดปุ่ม Send Data หรือปุ่มด้าน ซ้ายเพื่อเรียก Java Script เพื่อ Load iFrame
3. iFrame ส่งค่ากลับมาโดยยัดเข้าไปยัง Tage label ของ Page แม่
4. กดปุ่ม Get Data เมื่อกดปุ่มนี้จะเรียก Function ใน iframe เพื่อ Return ค่าออกมาตามรูป

   

   ได้มาจาก iframe

5. กดปุ่มใน iFrame ซึ่งปุ่มนี้จะเป็นปุ่มและ function ที่อยู่ใน iframe เพื่อแสดงให้เห็นว่าการทำงานใร iFrame จะส่งข้อมูลออกมายังไง

Index.html

Source code

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Result From iFrame : <labelid="lblResult"></label>
<hr/>
<inputtype="button"value="Send Data to iFrame vie URL"onclick="ifmData.location='TestiFrame1.aspx'"/>
<inputtype="button"value="Get Data from iFrame"onclick="alert(ifmData.GetData())"/>
<br/>
<iframename="ifmData"style="display:none2"></iframe>
</body>
</html>

TestiFrame1.aspx

Source code

<%@PageLanguage="C#"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<inputtype="button"value="Send Data Back to Parent Page"onclick="parent.lblResult.innerHTML='Send Data to Parent is '+Math.random()"/>
<script>
	parent.lblResult.innerHTML = "<b style='color:red'>ได้มาจาก iFrame ตอน Load ครั้งแรก " + Math.random() + " </b>";
	function GetData() {
		return Math.random()
	}
</script>
</body>
</html>

รูปแบบ Code เป็นดังนี้ครับ _gaq.push(‘_setCustomVar’, index,’name’,'value’, scope);

ผมรู้สึกว่า CVs มีประโยชน์มากๆ ดังนั้นจึงได้เขียนบทความนี้มาเพื่อแชร์ให้เพื่อนๆ ได้รู้จักกับ CVs กันครับ เราจะมาดูกันว่า มันคืออะไร ตัวอย่างการประยุกต์ใช้งาน และตัวอย่าง Code ง่ายๆ กันครับ

เริ่มด้วยการอธิบาย ตัวแปรต่างๆ ใน Code กันก่อนเลยดีกว่า ก็จะมีหลักๆ ด้วยกัน 4 ตัวครับ
Name
Value
Index
Scope

Name & Value

Format ของ CVs เป็นแบบ Name-Value pair หมายความว่าเราสามารถกำหนดตัวแปร (Key) อะไรก็ได้ที่เราต้องการขึ้นมา และต้องกำหนดค่าตัวแปร (value) ให้มัน ยกตัวอย่างเช่น ผมกำหนดตัวแปร (key) เป็นชื่อคนเขียน บล็อค Author และกำหนดค่าตัวแปร (value) คือชื่อของนักเขียนแต่ละคนได้แก่ Aui, Parn, Piin เป็นต้นครับ ข้อจำกัดอย่างเดียวที่มีคือ Name & Value ที่เราสร้างรวมกันห้ามเกิน 64 Characters ครับ

Index

สำหรับ Index เป็นเหมือนตัวจัดเก็บ CVs ทั้งหมด โดยเก็บไว้ใน slot index มีทั้งหมด 5 slot สิ่งที่เราต้องใส่ใน code คือ เลข 1-5 เพื่อเป็นการระบุว่าจะให้เก็บข้อมูลไว้ใน slot ไหน ถ้าเปรียบเทียบให้เข้าใจง่ายๆ Index 5 slot เปรียบเสมือน ที่จอดรถว่างๆ 5 ช่อง ครับ

Scope

Scope เป็นตัวที่บอกว่าเรากำลังเก็บข้อมูลในส่วนใดอยู่ สิ่งที่เราต้องใส่ใน code คือ เลข 1-3 ครับ สำหรับเลข 1 คือ Visitor Level เลข 2 คือ Session Level และ เลข 3 คือ Page Level ครับ

เพื่อให้เพื่อนๆ เข้าใจมากขึ้น ผมจะอธิบาย Model ของ Google Analytics ให้ครับ ดูจากภาพ

• Visitor คือระดับผู้เยี่ยมชม หรือคนเข้าเว็บ ซึ่งอยู่บนสุด
• ระดับที่สองคือ Session คือการเข้าเยี่ยมชมเว็บไซต์
• และระดับที่สาม คือ Page คือหน้าเว็บไซต์แต่ละหน้าที่เราเยียมชม

คนหนึ่งคน อาจจะเข้าเว็บได้หลายครั้ง แต่ละครั้งดูเพจ ไม่เท่ากัน ในที่นี้ คนเล่นเว็บก็คือ Visitor การเข้าเว็บแต่ละครั้งคือ session และการดูหน้าเว็บแต่ละหน้าก็คือ page ครับ

สิ่งที่ยากที่สุดของ CVs คือการใส่ค่า Slot กับ Scope นี่แหละครับ

เราจะบริหารจัดการ Slot กับ scope ได้อย่างไร

มาดูกันเลยครับเพราะว่าถ้าเรากำหนดผิด ข้อมูลมันจะซ้อนทับกันครับ คิดแบบนี้ครับ ถ้า slot เปรียบเสมือนทีจอดรถ ให้คิดซะว่า scope เปรียบเหมือนกับ รถยนต์ การที่เราจะใช้ slot ได้อย่างเต็มประสิทธิภาพนั้นต้องเข้าใจการเลือกใช้ scope ครับ เพราะ scope แต่ละแบบ จะมีอายุของการเก็บข้อมูลไม่เท่ากันครับ การที่เรารู้อายุของ scope ทำให้เราเรียกใช้ slot ซ้ำกันได้โดยที่ข้อมูลไม่ถูกซ้อนทับครับ เปรียบเทียบง่ายๆ ว่าเรามีที่จอดรถจำกัดแค่ 5 ช่อง จะบริหารจัดการอย่างไร ให้จอดรถได้ไม่ซ้อนคันกันนั่นเอง

Visitor (Scope 1)

ถ้าใช้ scope นี้เก็บข้อมูลใน slot แล้ว ข้อมูลใน slot นี้จะอยู่ยาวนานไปอีก 2 ปี เนื่องจากค่า cookie _utmv ครับ slot นี้จะไม่สามารถเอามาใช้งานได้อีก ถ้าเราเอาข้อมูลไปใส่ใน slot ซ้ำ ข้อมูลเก่าก็จะถูกลบไปครับ ถ้าเปรียบเทียบกับที่จอดรถ รถที่จอดในช่องนี้เปรียบเสมือนรถที่ยางแตก แถมเครื่องเสียครับ ช่องจอดรถนี้จึงไม่สามารถใช้ได้อีก ตัวอย่างของการใช้ Visitor Level มักจะเป็นข้อมูลที่ไม่เปลียนแปลง และคงอยู่ตลอดไป แม้ว่าจะออกจากเว็บไปแล้วก็ตามเช่น แบ่งแยก คนซื้อของหนึ่งครั้ง, คนที่ซื้อของซ้ำ 2-5 ครั้ง, คนที่ซื้อของ 6-10 ครั้ง อีกกรณีเช่น การรแบ่งระดับของ member เป็น Free, Bronze, Gold, และ Platinum เป็นต้น

Session (Scope 2)

ถ้าใช้ scope นี้เก็บข้อมูลใน slot แล้ว ข้อมูลใน slot นี้จะอยู่ไปจนกว่าผู้เยี่ยมชมจะออกจากเว็บไซต์ไป  เปรียบเทียบกับที่จอดรถ รถที่จอดในช่องนี้จอดเต็มวัน พอหมดวันก็ขับออกไป ช่องนี้ก็สามารถให้คันใหม่มาจอดแทนได้ ตัวอย่างของการใช้ Session Level มักจะเป็นข้อมูลที่อยู่ตลอดขณะเข้าเว็บหนึ่งครั้ง พอคนออกจากเว็บ slot ก็จะสามารถใช้งานซ้ำได้ เช่น  Login หรือ ไม่ Login  อีกกรณี เช่น เป็น Member หรือแค่ Visitor ธรรมดา

Page (Scope 3)

ถ้าใช้ scope นี้เก็บข้อมูลใน slot แล้ว ข้อมูลใน slot นี้จะอยู่ไปจนกว่าผู้เยี่ยมชมจะเปลียนหน้าเว็บไซต์เป็นหน้าอื่น เปรียบเทียบกับที่จอดรถแล้ว รถที่จอดในช่องนี้เหมือนกับรถที่มาแป๊บเดียว สตาร์ทรถทิ้งไว้ แล้วอีก 5 นาทีก็จะออกไป ช่องนี้ก็สามารถให้รถคันใหม่มาจอดแทนได้ ตัวอย่างการใช้งาน Page Level เช่น แบ่งเพื่อดูว่า นักเขียนคนไหนหรือ category ไหน ได้รับความสนใจมากที่สุด

ตัวอย่าง Code ครับ

เป็นการสร้าง CVs ในระดับ Visitor Level เพื่อแบ่งแยกระดับสมาชิก

ตัวอย่างที่สอง ครับ

เป็นการสร้าง CVs ในระดับ Page Level เพื่อแบ่งแยกผู้เขียน

เมื่อเราวางแผนและติด Code เสร็จหมดแล้วไว้มีโอกาสผมจะมาแสดงการนำข้อมูลเหล่านี้มาวิเคราะห์กันนะครับ ซึ่งเราสามารถนำไปประยุกต์ใช้กับ Custom Report หรือ Advanced Segment ก็ได้ครับ

มีหัวข้อหนึ่งในโพสที่แล้วที่ผมอยากนำมาขยายความและยกตัวอย่างกรณีศึกษาเพิ่ม นั่นก็คือเรื่อง การเน้นย้ำเมื่อจำเป็น (Emphasize Only When Necessary)

ก่อนที่ผมจะพูดถึงประเด็นนี้ผมจำเป็นต้องเกริ่นถึงแนวคิดหลักเบื้องหลัง Emphasize Only When Necessary เสียก่อน นั่นก็คือเรื่อง Frequency of Usage Analysis

ผมขอย้ำอีกครั้งว่า การออกแบบ Usability ที่ดีนั้น คือการต่อสู้กับเนื้อที่ที่จำกัดบนหน้าเว็บ คุณไม่สามารถใส่คอนเทนต์ทุกสิ่งทุกอย่างที่ต้องการลงในเว็บไซต์เล็กๆ และทำให้เว็บไซต์นั้นเข้าใจง่ายได้

ดังนั้นสิ่งที่คุณต้องทำก็คือ คุณจำเป็นต้องเลือกคัดคอนเทนต์บางอย่างที่มีความสำคัญน้อยทิ้งไป

คุณจะต้องปรับคอนเทนต์ที่ยังคงสำคัญให้รวบรัด กระชับ และประหยัดเวลาในการอ่านและประหยัดเนื้อที่บนหน้าเว็บ แต่ยังต้องคงไว้ซึ่งความสะดวกในการอ่าน ทั้งหมดนี้คือการต่อสู้เพื่อเนื้อที่บนหน้าเว็บไซต์นั่นเองครับ (The Fight for Space)

หากได้รับการฝึกและเรียนรู้ทฤษฏีด้าน Information Architecture อย่างดี ทุกๆ คนจะเรียนรู้ที่จะบริหารจัดการคอนเทนต์ได้ศักยภาพเท่าๆ กัน นั่นแปลว่าไม่ว่าคุณจะพยายามมากซักแค่ไหน เว็บไซต์คุณก็ไม่มีทางที่จะใช้ง่ายและดีไปกว่าของคู่แข่ง ในกรณีที่ฝีมือด้าน Usability ของพวกคุณสูสีกันจริงๆ

แล้วอะไรล่ะ ที่จะทำให้เว็บไซต์ของคุณแตกต่าง..?

ความจริงแล้ว มันมี “สิ่งหนึ่ง” ที่จะช่วยให้ Usability ของคุณนั้น “แตกต่าง” และ “โดดเด่น” จากคู่แข่ง ซึ่งสิ่งหนึ่งที่ว่านี้เป็นสิ่งที่แทบไม่มีใครในสายงาน Usability ให้ความใส่ใจอย่างจริงจัง แต่มันกลับเป็นสิ่งเดียวที่มีประสิทธิภาพมากที่สุดที่ช่วยยกระดับการออกแบบ Usability จากระดับ standard ไปสู่ระดับ excellence

สิ่งหนึ่งที่ว่านั้นก็คือ “Frequency of Usage Analysis” หรือ การศึกษาพฤติกรรมความถี่ในการใช้งานของผู้บริโภค และออกแบบ Usability ให้เหมาะสมกับความถี่นั้นนั่นเอง..!!

(พูดจริงๆ โพสเก่าๆ ที่ผมพูดถึงเรื่อง Step to Goal นั้นก็มีพื้นฐานมาจาก Frequency of Usage Analysis เช่นกัน)

แต่คนส่วนใหญ่มัวแต่ใช้เวลาไปกับการจัดการคอนเทนต์เสียจนลืมไปว่า มีกลยุทธ์การจัดการหน้าเว็บเพจที่ทำให้คุณสามารถใช้เนื้อที่บนเว็บไซต์ได้อย่างมีประสิทธิภาพเพิ่มขึ้นมาก เพียงแค่วิเคราะห์พฤติกรรมการใช้งานของผู้บริโภคเพิ่มอีกเล็กน้อย..!!

คีย์เวิร์ดสั้นๆ ก็เพียงแค่ “เน้นย้ำ เมื่อจำเป็น”

กรณีศึกษา Twitter.com

ลองมาดูเว็บไซต์ Twitter.com กัน ในแต่ละทวีตบน Twitter.com นั้นจะมี Action อยู่ 4 แบบให้ผู้ใช้คลิก นั่นก็คือ Reply, Retweet, Favorite และ Open

ในแต่ละหน้าของ Twitter.com จะมีทวีตเรียงกันเป็นสิบทวีต ดังนั้นหากทีมออกแบบเว็บไซต์ Twitter.com จัดวาง Action ทั้ง 4 ลงในทวีตแต่ละอัน ในหน้าหนึ่งหน้าก็จะมีปุ่มให้กดร่วมๆ ร้อยปุ่มทีเดียว (ดูภาพด้านล่าง)

นี่เป็นหน้าเว็บทดลองที่ผมลองใส่ปุ่ม Action ทั้งหมดลงในหน้าจอ ซึ่งผลลัพธ์ของมันก็คือ “โคตรรก..!!” ครับ

ประเด็นก็คือ ไม่มีเหตุผลใดที่ผู้ใช้ Twitter จะต้องมองเห็นปุ่ม Action เหล่านี้ตลอดเวลา พวกเขาควรจะเห็นมันก็ต่อเมื่อเอาเมาส์ไปชี้ที่ทวีตที่พวกเขาต้องการทำอะไรบางอย่างเท่านั้น ดังนั้น ถ้าเมาส์ไม่ได้จ่ออยู่ที่ทวีต ก็ไม่มีความจำเป็นใดๆ ที่จะต้องแสดง Action ให้รกหูรกตาผู้ใช้

การกำจัดปุ่ม Action เหล่านี้ออกไปจะช่วยให้เพจเรียบง่ายขึ้นมาก นี่แหละครับ การ Fight for Space วิธีหนึ่ง นั่นก็คือ เน้นย้ำ (แสดงปุ่ม Action) เมื่อจำเป็น (เมื่อเอาเมาส์ไปวางบนทวีตที่ต้องการ)

เมื่อทำดังนั้นแล้ว Twitter.com จึงมี Usability ที่เรียบง่ายสบายตาดังภาพด้านล่าง

การซ่อน หรือปิดองค์ประกอบของเพจที่ไม่จำเป็นในบางช่วงเวลา เป็นศิลปะการออกแบบ Usability ที่ดีที่นักออกแบบเว็บไซต์ควรพิจารณา

เชื่อไหมครับว่าในเว็บไซต์เกิน 60% บนโลกนี้ มักจะมีการแสดงผล “ส่วนเกิน” อยู่เสมอๆ ผมยกตัวอย่างง่ายๆ ปุ่ม “Read More…” ที่ใส่ต่อท้ายคอนเทนต์ข่าวในเว็บส่วนใหญ่ เป็นสิ่งที่ไม่จำเป็นเลย โดยเฉพาะอย่างยิ่งกับเว็บไซต์ที่มีคอนเทนต์มากอยู่แล้ว การเพิ่มคำว่า Read More ต่อท้ายทุกๆ ข่าวมันคือการใช้เนื้อที่โดยเปล่าประโยชน์อย่างแท้จริง

คุณสามารถออกแบบให้ผู้ใช้คลิกที่หัวข้อของข่าว หรือพื้นที่ส่วนใดๆ ที่เป็นเนื้อที่ในกรอบข่าว ก็สามารถลิงค์ต่อไปอ่านรายละเอียดได้

อีกตัวอย่างก็คือระบบคอมเมนต์บนเว็บไซต์ Github.com

นี่ก็เข้าคอนเซปต์ Emphasize Only When Necessary ครับ

Now Playing: ตัวอย่างคลาสสิกบน Mobile

อีกตัวอย่างคลาสสิกจากบริษัทที่ออกแบบ Usability ได้ดีอันดับโลก นั่นก็คือ iPod Application บน iOS นั่นเองครับ

โดยปกติแล้ว User Interface ของ iPod ขณะเล่นเพลงจะแสดงผลง่ายๆ แบบด้านล่าง นั่นคือแสดงให้เป็นภาพ Artwork เต็มจอ และปุ่มควบคุมการเล่นเพลงพื้นฐาน (เล่น, หยุด, ข้าม) ด้านล่าง

แต่เมื่อผู้ใช้งานต้องการเรียกคำสั่งเพิ่มเติมใดๆ นอกเหนือปุ่มพื้นฐาน เพียงแค่แตะที่หน้าจอ โปรแกรม iPod ก็จะแสดงเมนูเพิ่มเติมขึ้นมาทันที (ไทม์ไลน์ของเพลง, การเล่นซ้ำ และการเล่นสุ่ม รวมถึงระบบ Genius playlist)

นั่นหมายความว่า ฟังก์ชั่นที่ไม่ได้มีการใช้งานบ่อยๆ จะถูกซ่อนไว้เพื่อความเรียบง่าย และแสดงผลเมื่อจำเป็นเท่านั้น เข้าคอนเซปต์เดิมคือ Emphasize Only When Necessary

ปิดท้าย

การซ่อนองค์ประกอบที่ไม่จำเป็นนั้นไม่ได้ใช้งานได้เสมอไป คุณจำเป็นจะต้องชั่งน้ำหนักถึงประโยชน์และโทษที่จะเกิดขึ้น ยกตัวอย่างโทษง่ายๆ ก็คือ ถ้าคุณซ่อนของเยอะเกินไป ผู้ใช้อาจจะหาไม่เจอ หรือถ้าคุณซ่อนของที่จำเป็นจะต้องใช้บ่อยๆ ผู้ใช้ก็อาจจะรำคาญได้

ในกรณี iPod นั้นก็มีผู้ใช้เบื้องต้นหลายคนที่หงุดหงิดเพราะหาปุ่ม Repeat เมื่อต้องการเล่นเพลงซ้ำไม่เจอ แต่ความหงุดหงิดนี้จะเกิดขึ้นเพียงครั้งเดียว (และส่วนใหญ่ทุกคนจะร้อง “อ๋อ..” และกลับรู้สึกโทษว่าตัวเองโง่มากกว่าที่จะโทษ Apple และ Steve Jobs) แลกกับความเรียบง่ายที่ผู้ใช้จะได้รับมันตลอดการใช้งาน

คุณสามารถเริ่มง่ายๆ ได้โดยการเปิดหน้าเว็บไซต์ของคุณ และเริ่มสำรวจพร้อมทั้งตั้งคำถามให้ตัวเองว่า “มีสิ่งใดในเพจบ้าง ที่คุณสามารถซ่อนเอาไว้ก่อนในครั้งแรก และนำมาแสดงให้เห็นเมื่อจำเป็น..?”

พบกันใหม่ตอนหน้าครับ

วันนี้ผมมีทิปเล็กๆ น้อยๆ ที่ทุกๆ คนที่เขียนจาวา ต้องคุ้นเคยแต่บางคน สับสน หรือ ลืมๆ กันไปบ้าง หรือคนที่ยังไม่รู้ โดยวันนี้จะมาพูดถึงเรื่องการเปรียบเทียบ object และ parameter  ใน JAVA ว่า อะไรใช้อย่างไรบ้าง

Tip, JAVA Programming  ['if' Statement - if inside if  ]

วันนี้จะมาพูดถึงเรื่อง if statement

เมื่อเขียน if โดยใช้ ปีกกาเปิด และปิดหลังทุกครั้ง จะไม่เกิดปัญหาดังนี้ :

if (age < 18) {
if (height > 180) {
c = Color.RED;
}
} else {
c = Color.BLUE;
}

และเมื่อ true หรือ false เราเขียนแค่ statement เดียว เลยย่อได้เป็นดังนี้ :

if (age < 18)
    if (height > 180)
        c = Color.RED;
else
    c = Color.BLUE;

แต่ผิด การเขียน if else แบบล่างจะไม่ได้ผลลัพธ์ เท่าการใส่ปีกกาเหมือนด้านบน ซึ่งเพราะว่า ตัว java จะคิดว่า else ตัวนี้จะเป็นของ if ตัวที่ใกล้ที่สุด ดังนี้:

if (age < 18) {
    if (height > 180)
        c = Color.RED;
    else
        c = Color.BLUE;
}

สรุป: ฉะนั้น เราควรใส่ปีกกาทุกครั้งเมื่อใช้ if statement เพื่อลดความผิดพลาดจากการเขียน code

จาก code ด้านล่างนี้ program จะ return ค่าออกมาว่า think you’re lying about your age! อย่างเดียว  ไม่ว่ากรณีใดๆทั้งสิ้น  เนื่องมาจากอะไร?

String ageStr = JOptionPane.showInputDialog(null, "How old are you?");
int age = Integer.parseInt(ageStr);
if (age > 120 || age < 0);
    System.out.println("I think you're lying about your age!");

เพราะว่าเครื่องหมาย ; ใน JAVA หมายถึงว่า จบ statement นั้นๆแล้ว ซึ่งหมายความว่า เมื่อเข้า statement if (age > 120 || age < 0); ก็จบการทำงานของstatement นั้นเลย

จากที่เคยแนะนำไป แสดงให้เห็นว่าเราสามารถอ้างอิง property ของ JSON[http://www.json.org/] ได้โดยการใช้ เครื่องหมาย [] เช่น obj['name'] มีค่าเท่ากับ obj.name ซึ่งในความเป็นจริงแล้วเราสามารถใช้ [] อ้างอิงถึง property ของ Object ใดๆใน Javascript ก็ได้ เช่น window.location['href']=’http://www.google.com’; มีค่าเท่ากับ window.location.href=’http://www.google.com’; รวมถึง property ที่เป็น function ของ Object นั้น ซึ่งผมจะแสดงให้เห็นจาก code ตัวอย่างร่วมกับ jQuery[http://www.jquery.com] ดังนี้

<a href='fadeIn'>Click Me Fade In</a>
	<a href='fadeOut'>Click Me Fade Out</a>
	<p>Text Content</p>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('a').click(function(){
				var href=$(this).attr('href');
				$('p')[href](500);
				return false;
			});
		});
     </script>

ดูตัวอย่างการแสดงผล >> Demo

จาก code ตัวอย่างแสดงการอ้างอิงและเรียกใช้ function fadeIn และ fadeOut ของ jQuery ซึ่งการอ้างอิง function นั้นเหมือนกับการอ้างอิง property ทุกอย่าง เพียงแต่ต้องมีการเรียกใช้ function ด้วยเช่น window['alert'](‘test dynamic function’); มีค่าเท่ากับ window.alert(‘test dynamic function’); ซึ่งเราสามารถนำเทคนิคนี้ไปปรับใช้ทำให้การเขียน code ของเราสั้นและง่ายขึ้นได้ครับ