Day: May 17, 2022

  • Figma: Scrolling  with overflow behavior (Horizontal Scrolling)

    naparat.h

    บล๊อกนี้ผู้เขียนจะมาแนะนำวิธีการตั้งค่า Mobile App Prototype ที่เราได้พัฒนาขึ้นมา (ด้วย figma) เพื่อให้ผู้ใช้สามารถเลื่อน (Scrolling) ส่วนของเนื้อหาที่มีมากจนเกินขนาดของอุปกรณ์ได้ โดยใน figma นั้น สามารถทำ Scrolling เพื่อให้รองรับกับพฤติกรรมของผู้ใช้ได้ 3 แบบ ดังนี้ค่ะ

    แบบที่ 1 Horizontal Scrolling  คือ การเลื่อนในแนวนอน ซ้ายและขวาภายในเฟรม โดยยังคงตำแหน่งแนวตั้งไว้ เช่น ภาพสินค้า , แกลอรี่ภาพ

    แบบที่ 2 Vertical Scrolling คือ การเลื่อนในแนวตั้ง ขึ้นและลงภายในเฟรม เช่น เลื่อนดูเว็บไซต์ที่มีขนาดยาว หรือเนื้อหาที่อยู่ภายในแอป

    แบบที่ 3 Horizontal & Vertical Scrolling คือ การเลื่อนในแนวนอนและแนวตั้ง ผู้ใช้สามารถเลื่อนไปในทิศทางใดก็ได้ภายในเฟรม เช่น การดูแผนที่

    สำหรับบล๊อกนี้นั้น ผู้เขียนขอยกเอา Horizontal Scrolling มาแนะนำกันก่อนนะคะ

    ขั้นตอนหลักๆของการทำ Scrolling ก็มีตามนี้ค่าาาาา

    1. กดเลือก frame ที่ต้องการทำ Scrolling (ต้องเป็น Frame นะคะ จึงจะกำหนด Scrolling ได้)
    2. เปิด panel Prototype ที่แถบด้านขวา
    3. เลือก overflow behavior ตามที่ต้องการ ซึ่งมี 4 ตัวเลือกนะคะ คือ
      • No Scrolling
      • Horizontal Scrolling **
      • Vertical Scrolling
      • Horizontal & Vertical Scrolling

    Horizontal Scrolling ผู้ใช้เลื่อน content ซ้ายและขวาภายใน frame

    วิธีการดูในคลิปได้เลยค่า

    ในคลิป
    วินาทีที่ 0:00:11 ทำ Group ให้เป็น frame (คลิกขวาบน Group แล้วเลือก Frame Selection) อย่างที่บอกกันข้างต้น เนื่องจากหากไม่ใช่ frame จะกำหนด Scrolling ไม่ได้
    วินาทีที่ 0:00:11 ปรับขนาดของ frame และ ซ่อนเนื้อหาที่เกินกรอบ โดยติ๊กถูกที่ Clip Content
    วินาทีที่ 0:00:25 ไปที่ prototype panel แล้วกำหนด Overflow scrolling แบบ Horizontal scrolling
    วินาทีที่ 0:00:34 กด Present ลองดูผลลัพธ์กัน 😉

    Ref : https://help.figma.com/hc/en-us/articles/360039818734-Prototype-scrolling-with-overflow-behavior

  • การประยุกต์ใข้  Sequence เพื่อสร้างตัวเลขอัตโนมัติให้กับ Table ใน Oracle Database

    benjawan.n

    ก่อนหน้านี้เคยได้รับความต้องการจากระบบหนึ่งซึ่งเป็นระบบที่รับสมัครนักเรียนเพื่อเข้าศึกษาต่อในมหาวิทยาลัยโดยมีความต้องการข้อหนึ่งว่า “ในส่วนการจัดเก็บข้อมูลเลขที่สมัคร ให้รันข้อมูลเลขที่ผู้สมัครตามโครงการที่เปิดรับในแต่ละปีการศึกษา”

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

    วิธีการดำเนินการก็ไม่ยุ่งยากแค่สร้าง sequence ตามโครงการและปีที่เปิดรับทั้งหมดไว้ให้ก่อนให้เรียบร้อยและเมื่อนักศึกษามาสมัครก็สามารถเรียกใช้ได้เลย

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

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

    ขั้นตอนที่ 1

    ตรวจสอบว่ามีสร้าง sequence หรือยัง โดยเราสามารถตรวจสอบได้จาก object : user_sequences ตามตัวอย่าง Oracle Function ดังต่อไปนี้

        FUNCTION CountSequence (var_seq_name IN VARCHAR2)

            RETURN NUMBER

        IS

            var_seq_count   NUMBER := 0;

            var_seq_query   VARCHAR2 (1000);

        BEGIN

            var_seq_query :=

                   ‘SELECT COUNT (*) FROM user_sequences WHERE sequence_name = ”’

                || var_seq_name

                || ””;

            EXECUTE IMMEDIATE var_seq_query

                INTO var_seq_count;

            RETURN var_seq_count;

        END;

    ขั้นตอนที่ 2

    ทำการสร้าง sequence ตามหลักการการตั้งชื่อ ตามตัวอย่าง Oracle Procedure ดังต่อไปนี้

    PROCEDURE CreateSequence (var_seq_name IN VARCHAR2)

        IS

            var_seq_count   NUMBER := 0;

        BEGIN

            var_seq_count := CountSequence (var_seq_name);

            IF var_seq_count = 0

            THEN

                EXECUTE IMMEDIATE   ‘CREATE SEQUENCE ‘

                                 || var_seq_name

                                 || ‘ START WITH 1 INCREMENT BY 1 MINVALUE 1 MAXVALUE 9999999            

                                 NOCACHE NOCYCLE’;

            END IF;

        END;

    ขั้นตอนที่ 3

    เมื่อทำการสร้าง sequence เสร็จเรียบร้อย เราสามารถดึงค่าถัดไปของลำดับด้วยคำสั่ง nextval

    การออกเลขที่ผู้สมัครให้กับนักเรียน ซึ่งจะถูกเก็บไว้ที่ตัวแปร var_app_no โดยมีความยาวขนาด 5 หลัก เริ่มต้นจาก 00001,00002,……  ตามตัวอย่าง

    หมายเหตุ : หลักการในการตั้งชื่อ sequence คือ  ‘SEQ_APP_NO_’  + รหัสโครงการ + ปีการศึกษา

    เราสามารถออกเลขที่ผู้สมัครได้ตามตัวอย่าง Oracle Procedure ดังต่อไปนี้

        PROCEDURE ToGetApplicationNO (var_seq_name   IN     VARCHAR2,

                                      var_app_no        OUT VARCHAR2)

        IS

        BEGIN

            CreateSequence (var_seq_name);

            EXECUTE IMMEDIATE   ‘SELECT LPAD (‘

                             || var_seq_name

                             || ‘.NEXTVAL, 5, ‘

                             || ”’0”)’

                             || ‘ FROM DUAL’

                INTO var_app_no;

        END;

    จากขั้นตอนที่ 1-3 เราก็สามารถที่จะออกเลขที่ผู้สมัคร โดยรันข้อมูลเลขที่ผู้สมัครตามโครงการที่เปิดรับในแต่ละปีการศึกษา ได้ตามความต้องการแล้วค่ะ หวังว่าโพสนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อยนะคะ แล้วพบกันใหม่ค่ะ

  • ว่าด้วยเรื่องการคำนวณตัวเลขตรวจสอบ (Check Digit)

    benjawan.n

    ได้รับมอบหมายจากทีมในการสร้าง Oracle Function เพื่อคำนวณตัวเลขตรวจสอบ (check digit) ของการชำระเงินค่าสมัครผ่านช่องทางการชำระเงินช่องทางหนึ่ง โดยได้รับ requirement มาดังภาพข้างล่างนี้

    จากภาพข้างต้นจะมีข้อมูลสำหรับการนำเข้า 4 ชุดซึ่งประกอบด้วย

    • ชุดที่ 1 : Customer No.1/Ref.1 
    • ชุดที่ 2 : Due Date (DDMMYY : พ.ศ.)  
    • ชุดที่ 3 : Customer No.2/Ref.2
    • ชุดที่ 4 : จำนวนเงินที่ต้องชำระ

    พร้อมด้วยขั้นตอนวิธีในการคำนวณตัวเลขตรวจสอบ (check digit) ดังนี้

    มาทำความเข้าใจกับวิธีคำนวณกันก่อนที่จะเริ่มต้นสร้าง Oracle Function

    ถ้ามาดูรายละเอียดของวิธีการคำนวณในข้อที่ 1 ซึ่งเป็นการหาค่าประจำหลักของข้อมูลนำเข้า โดยวิธีการคือ นำข้อมูลแต่ละหลักคูณค่าคงที่ คือ 6, 4, 5, 8, 7 ไปเรื่อย ๆ ตามลำดับ

    การหาค่าประจำหลักของข้อมูลนำเข้า จะสังเกตุว่าถ้านำข้อมูลนำเข้าทั้ง 4 ชุดข้อมูลมาเรียงต่อกันจะมีความยาวเท่ากับ 35 โดยที่

    • ลำดับที่ 1, 6, 11, 16, 21, 26, 31 นำค่าข้อมูลคูณด้วย 6
    • ลำดับที่ 2, 7, 12, 17, 22, 27, 32 นำค่าข้อมูลคูณด้วย 4
    • ลำดับที่ 3, 8, 13, 18, 23, 28, 33 นำค่าข้อมูลคูณด้วย 5
    • ลำดับที่ 4, 9, 14, 19, 24, 29, 34 นำค่าข้อมูลคูณด้วย 8
    • ลำดับที่ 5,10, 15, 20, 25, 30, 35 นำค่าข้อมูลคูณด้วย 7

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

    • ลำดับที่ 1, 6, 11, 16, 21, 26, 31 เมื่อ mod ด้วย 5 จะได้ค่ากับ 1
    • ลำดับที่ 2, 7, 12, 17, 22, 27, 32 เมื่อ mod ด้วย 5 จะได้ค่ากับ 2
    • ลำดับที่ 3, 8, 13, 18, 23, 28, 33 เมื่อ mod ด้วย 5 จะได้ค่ากับ 3
    • ลำดับที่ 4, 9, 14, 19, 24, 29, 34 เมื่อ mod ด้วย 5 จะได้ค่ากับ 4
    • ลำดับที่ 5,10, 15, 20, 25, 30, 35 เมื่อ mod ด้วย 5 จะได้ค่ากับ 0

    ดังนั้นเราก็สามารถค่าประจำหลักของข้อมูลนำเข้าได้ดังต่อไปนี้

    • ค่าลำดับที่ mod ด้วย 5 ได้เท่ากับ 1 ให้นำค่าข้อมูลคูณด้วย 6
    • ค่าลำดับที่ mod ด้วย 5 ได้เท่ากับ 2 ให้นำค่าข้อมูลคูณด้วย 4
    • ค่าลำดับที่ mod ด้วย 5 ได้เท่ากับ 3 ให้นำค่าข้อมูลคูณด้วย 5
    • ค่าลำดับที่ mod ด้วย 5 ได้เท่ากับ 4 ให้นำค่าข้อมูลคูณด้วย 8
    • ค่าลำดับที่ mod ด้วย 5 ได้เท่ากับ 0 ให้นำค่าข้อมูลคูณด้วย 7

    จากแนวคิดข้างต้นและขั้นตอนวิธีการคำนวณตาม requirement ที่กำหนดให้สามารถเขียนเป็น Oracle Function เพื่อจะคำนวณหาค่าตัวเลขตรวจสอบ (check digit) ได้ดังนี้

        FUNCTION GetPaymentCheckDigit (var_reference_1   IN VARCHAR2,

                                       var_reference_2   IN VARCHAR2,

                                       var_amount        IN VARCHAR2,

                                       var_due_date      IN VARCHAR2)

            RETURN VARCHAR2

        IS

            var_text_concat   VARCHAR2 (50);

            var_total_sum     NUMBER (5);

            var_x             VARCHAR2 (1);

            var_out_result    VARCHAR2 (2);

            var_text_length   NUMBER (2);

        BEGIN

            var_total_sum := 0;

            var_text_concat :=

                var_reference_1 || var_due_date || var_reference_2 || var_amount;

            var_text_length := LENGTH (var_text_concat);

            FOR i IN 1 .. var_text_length

            LOOP

                var_x := TO_NUMBER (SUBSTR (var_text_concat, i, 1));

                CASE

                    WHEN MOD (i, 5) = 1

                    THEN

                        var_total_sum := var_total_sum + var_x * 6;

                    WHEN MOD (i, 5) = 2

                    THEN

                        var_total_sum := var_total_sum + var_x * 4;

                    WHEN MOD (i, 5) = 3

                    THEN

                        var_total_sum := var_total_sum + var_x * 5;

                    WHEN MOD (i, 5) = 4

                    THEN

                        var_total_sum := var_total_sum + var_x * 8;

                    WHEN MOD (i, 5) = 0

                    THEN

                        var_total_sum := var_total_sum + var_x * 7;

                END CASE;

            END LOOP;

            var_out_result := TRIM (TO_CHAR (MOD (var_total_sum * 3, 100), ’00’));

            RETURN var_out_result;    

    END;

    หลังจากที่ได้เขียน Oracle Function : GetPaymentCheckDigit ตามเงื่อนไขวิธีการคำนวณเรียบร้อยแล้ว ได้ทำการทดลอง Exec Oracle Function : GetPaymentCheckDigit โดยใช้ข้อมูลทดสอบตามไฟล์ตัวอย่างข้างต้นโดยที่

    • Customer No.1/Ref.1  = 6400000327
    • Due Date (DDMMYY : พ.ศ.)  = 311264
    • Customer No.2/Ref.2  = 649002300013
    • จำนวนเงิน = 0050000
    • ตัวเลขตรวจสอบ (check digit) = 87

    ตัวเลขลขตรวจสอบ (check digit) จากไฟล์ตัวอย่างมีค่าเท่ากับ 87 และผลจากการรัน Oracle Function : GetPaymentCheckDigit ผลลัพธ์ที่ได้คือ 87 เท่ากัน

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

  • UX, everything related!

    ekaphon.t

    เรามักได้ยินคำว่า UI เป็นประจำเมื่อเราพัฒนาระบบแต่ รู้หรือไม่ว่านอกจาก UI แล้วมันมีอีกหนึ่งอย่างที่ควรรู้และสำคัญยิ่งกว่าแต่ถูกมองข้ามไปคือ UX (ย่อมาจาก User experience) หลายๆคนมักจะสับสนว่า UI และ UX มันคือสิ่งเดียวกัน จริงๆแล้วมันคือคนละอย่างกันเลย วันนี้เราจะมาเล่าให้ฟัง

    รูปภาพจาก UX vs. UI Design: What’s the Difference? – louelledesignstudio

    UI :: User Interface

    User Interface คือหน้าตาของระบบที่ผู้ใช้ได้เห็น ได้ตอบสนอง ไม่ใช่ระบบในทางคอมพิวเตอร์อย่างเดียวที่มี UI ถ้าเทียบกับขวดซอสมะเขือเทศ ขวดก็คือหนึ่งใน UI เช่นกันหรืออาหาร 1 จาน หน้าตาของอาหารก็ถือว่าเป็น UI ด้วย

    “UI เป็นสิ่งที่สามารถมองเห็นได้หรือจับต้องได้“

    UX :: User Experience

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

    “UX คือสิ่งที่อยู่กับความรู้สึก จับต้องไม่ได้ มองไม่เห็น แต่วัดประเมินผลได้”

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

    จริงๆแล้ว นอกจาก website หรือ application ที่ต้องมี UX ที่ดีเป็น 1 ในองค์ประกอบแล้ว ทุกๆอย่างรอบตัวในชีวิตประจำวันก็ต้องมี UX ที่ดีเช่นกัน

    รูปภาพจาก Why people need to stop obsessing over UI design | by Zameel Kainikkara | Zartek | Medium

    Why should we have to care on UX?

    UX เรียกได้ว่าเป็นสารต้นต้นของสินค้าก็ว่าได้ การทำให้ผู้ใช้ได้รับประสบการณ์ที่ดีมักจะเป็น 1 ในวัตถุประสงค์หลักในการออกแบบสินค้าและบริการ เพราะถ้าทำออกมาแล้ว ผู้ใช้ไม่ enjoy ใช้แล้วลำบากกว่าเดิม แล้วใครจะมาใช้งาน? สินค้าบางอย่างที่ใช้ในชีวิตประจำวันเช่นซอสมะเขือเทศออกแบบขวดซอสแบบทั่วไป เวลาใช้ผู้ใช้จะต้องเคาะ/เขย่าขวด ซอสจึงจะออกมา การออกแบบขวดให้เป็นแบบคว่ำ บีบแล้วซอสออกเลย เป็นการแก้ปัญหาของผู้ใช้ เมื่อผลิตออกมาจึงขาย ตอบโจทย์ปัญหาของผู้ใช้ ผู้ใช้ก็ happy, win win ทั้งผู้ขายและผู้ซื้อ

    แล้วเราจะไปหาข้อมูลอะไรมาวิเคราะห์หละ แน่นอน

    UX = Research

    Research เท่านั้น ไม่ว่าจะเป็นการทำแบบสอบถาม การสัมภาส การสังเกตการใช้งาน การลงพื้นที่จริง หรือการอิงข้อมูลทางสถิติหรือข้อมูล log ยิ่งทำเยอะยิ่งทำให้เกิด UX ที่ดี

    การมี user experience ที่ดีมาจากการทำ Research หรือการค้นความหาข้อมูล ถามว่าการตามหาข้อมูลจะทำได้อย่างไรหละ

    User Research

    การ research ข้อมูลของผู้ใช้งาน/กลุ่มผู้ใช้งาน จะได้ออกแบบได้ตรงจุด

    • ข้อมูลส่วนตัวของผู้ใช้เช่น อายุ เพศ ที่อยู่ เป็นต้น
    • ผู้ใช้ที่เราขายคือใคร กลุ่มไหนบ้าง ทำงานอะไร
    • ผู้ใช้สินค้าเรามีบุคลิกอย่างไร นิสัยเป็นอย่างไร รวมไปถึง
    • รูปภาพของผู้ใช้ ควรเป็นรูปที่สามารถสื่อถึง Lifestyle ของคนๆนั้นได้ จะดีมากๆ

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

    Brand Research

    คนที่ว่าจ้างหรือว่าง่ายๆคือเจ้าของระบบคือใคร Brand หรืออัตลักษณ์ของเขาเป็นอย่างไร วัตถุประสงค์ขององค์กร สีขององค์กร design token ขององค์กร ก็เป็นอีก 1 อย่างที่ต้องมีการศึกษาข้อมูลด้วยเช่นกัน

    Problem Research

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

    What’s good UX?

    (ยกตัวอย่าง) ในการสร้างสินค้าขึ้นมาสักชิ้นที่จะทำให้ผู้ใช้รู้สึก win แล้วนั้น อีก 2 สิ่งที่ต้อง win ด้วยคือ Brand/Business win ด้วยไหม เสียผลประโยชน์รึเปล่าและ Team หรือคนสร้างสินค้า win ด้วยหรือไม่ ถ้าทั้ง 3 อย่างนี้ win ถือว่าเป็น UX ที่ดี

    ทั้งนี้การมี UX ที่ดีข้างต้นอาจเป็นเพียงสมมติฐานเบื้องต้น อาจจะมีปัจจัยอื่นๆเข้ามาเกี่ยวข้องอีก หรืออาจจะใช้ปัจจัยอื่นมาเป็นตัววัดก็ได้เช่น Happiness, Usability เป็นต้น

    Summary

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

    โอกาาสหน้าไว้จะมาอธิบายการทำ UX Research ด้วยวิธีการต่างให้ดูเป็นแนวทางในการสร้างสินค้าและบริการให้ฟังกันครับ

  • สร้าง Modal dialog อย่างง่ายด้วย jquerymodal

    sirapat.s

    เนื่องจากตอนนี้มีพรบ.คอมพิวเตอร์เข้ามาเกี่ยวข้อง จึงต้องมี pop up Modal dialog ถามผู้ใช้ วันนี้จะมาแนะนำการใช้งาน jQuery ที่เรียกใช้ไม่กี่บรรทัดเราก็ได้ Modal dialog โดยจะยกตัวอย่าง Modal dialog แบบไม่ให้ปิดได้ โดยต้องอ่านข้อความก่อน ถึงจะปิดได้

    ขั้นตอนที่ 1 เพิ่ม jquery.min.js, jquery.modal.min.js, jquery.modal.min.css เพื่อเรียกใช้งาน

    <!-- Remember to include jQuery :) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" type="text/javascript"></script>
    <!-- jQuery Modal -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.css" />

    ขั้นตอนที่ 2 เพิ่มการตั้งค่า Modal dialog ตามตัวอย่างไม่ให้แสดงปุ่ม “ปิด”

     <script type="text/javascript">
        $(document).ready(function () {
            $("#ex1").modal({
                escapeClose: false,
                clickClose: false,
                showClose: false,
                fadeDuration: 100
            });
        });

    </script>

    ขั้นตอนที่ 3 เพิ่ม User interface Modal dialog โดยใช้ tag div

    ขั้นตอนที่ 4 ได้ผลลัพธ์ Modal dialog ออกมาอย่างสวยงาม

    ที่มา : https://jquerymodal.com

  • Excel : ลำดับที่แบบตัวเลขด้วยคำสั่งง่าย ๆ ไม่ต้องลากเมาส์!

    sirima.sa

    เคยไหม ที่พยายามใส่เลข 1-100 ใน Column ใด ๆ เอง ด้วยวิธีการต่าง ๆ แบบนี้

    บางคนใช้วิธีพิมพ์เอง 😒

    บางคนใช้วิธีพิมพ์เลข 1 2 3 คลุมแล้วลาก 😂

    แต่!!! จะดีกว่าไหม ถ้ามีวิธีที่เร็วและเราสามารถระบุได้ว่าจะสิ้นสุดที่เลขใด 😍 มาดูวิธีกันเลยค่ะ

    ใน Cell A1 พิมพ์คำสั่งดังนี้ค่ะ

    =SEQUENCE(xx) โดยที่ xx คือจำนวนที่เราต้องการให้เลขแสดงถึง

    แล้วกดปุ่ม Enter!

    โดยตัวอย่างในวีดีโอ ให้แสดงถึงเลข 20 ดังนั้นคำสั่งจึงเป็นดังนี้ค่ะ

    =SEQUENCE(20)

    เพียงเท่านี้ คุณก็จะได้ Running Number จาก 1-100 โดยที่ไม่ต้องลากเมาส์แล้วค่ะ 😁👍💖

    หวังว่าโพสนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อยนะคะ แล้วพบกันใหม่ค่าาา

  • Screen Recording with Xbox Game Bar

    sirima.sa

    หลาย ๆ ครั้งที่เราต้องการอัดวิดีโอหน้าจอ เพื่อนำไปนำเสนองาน ไม่ว่าจะเป็นการเขียน Blog ทั้งหลาย เพื่อให้ผู้อ่านเห็นวิธีการชัดขึ้น เมื่อเทียบกับการ Capture ภาพปกติ 💖

    และเป็นอีกหลาย ๆ ครั้งที่หลาย ๆ คนต้องหาโปรแกรมฟรีต่าง ๆ เพื่อมาทำสิ่งนี้ 😂

    แต่เดี๋ยวก่อน!!! ทางผู้เขียนมีโปรแกรมติดเครื่อง Window10 หรือแม้จะใช้ Window11 ก็ยังมี นั่นก็คือ

    Xbox Game Bar

    ใช่ค่ะ ทางผู้เขียนไม่ได้ให้เชิญชวนท่านมาเล่นเกมนะคะ แต่จะอะแด๊บแอปพลายเพื่อจะนำมาใช้ในการทำ Screen Recording ค่า 😁

    แต่เนื่องจากโปรแกรมนี้ไม่สามารถ Screen Recording Window Desktop หรือ File Explorer ได้ สำหรับ Blog นี้จึงจำเป็นต้องใช้ภาพประกอบแทนวิดีโอนะคะ วิธีการเป็นยังไง ไปดูกันเล้ยยยย 😎

    ขั้นตอนแรก ไปเปิดการใช้งานก่อนเลยค่ะ เริ่มจาก กดปุ่ม window พิมพ์ setting ที่เมนูฝั่งซ้าย เลือกเมนู Gaming จากนั้นที่เมนู Open Xbox Game Bar using this button a controller เลือก on

    เริ่มต้นใช้งาน ก่อนที่จะเริ่มบันทึก ให้อยู่ที่หน้าจอที่จะบันทึกก่อน จากนั้นกดคีย์ลัด windows key+G เพื่อเรียก Xbox Game Bar หรือจะกดปุ่ม window พิมพ์ xbox จากนั้น เลือก Xbox Game Bar ก็ได้ทั้ง 2 วิธีค่ะ แต่แนะนำคีย์ลัดสะดวกกว่าค่ะ👌

    เมื่อกดแล้วจะพบหน้าต่างมากมายดังรูปด้านล่างค่ะ

    จากนั้นที่หน้าต่างเล็ก ๆ ที่ชื่อว่า Capture ให้กดปุ่มที่ 3 เพื่อเริ่มต้นอัดวิดีโอดังภาพด้านล่าง

    เมื่อกดปุ่มเริ่มอัด จะมีหน้าต่างเล็ก ๆ มีเวลานับแสดงแบบนี้ค่ะ

    เมื่ออัดเสร็จกดปุ่มหยุด จากนั้นไฟล์วิดีโอจะถูกบันทึกไว้ที่ This PC -> Videos -> Captures

    หมายเหตุ ผู้เขียนใช้ Window 11 นะคะ แต่ Window10 ก็ไม่ต่างกันมากค่ะ

    Tips สามารถกดปุ่ม windows key+alt+r เพื่อเริ่มต้นอัดวีดีโอได้โดยไม่ผ่านขั้นตอนข้างต้น 😁😁

    หวังว่าเนื้อหารอบนี้จะเป็นประโยชน์ต่อผู้อ่านไม่มากก็น้อยนะคะ แล้วเจอกันใหม่ค่าาา ❤️😘