Golden rules — the 3 Where(s) and What of Navigation :

1. WHERE you are
2. WHERE you are going
3. WHERE you’ve been
4. WHAT you can do now

Different levels of structure, according to domain:

• app: widgets; screens; application; environment
• web: HTML; page layout; site; browser+www
• device: controls; physical layout; modes; real world

Static Structure Diagrams

• Screen Hierarchy

1. Shows structure/relationship
2. System-oriented
3. Remember : deep is difficult

• Navigation Network

1. Shows different paths through system
2. Including branches
3. More task-oriented

• Dialogue is the pattern of interaction between users and system: -may be schematic (fill in blanks, e.g. names in wedding vows), – but course may change according to responses
• In UIs, Dialogue Design: – refers to structure of interaction, -often low-level (cf cognitive models), -not only conversing, also for instructing, manipulating, etc
• Recall levels: -lexical: key or button presses/releases, icon shapes, -syntactic: order of inputs/outputs, -semantic: actual effect on application/data

Dialogue Modes

• Menu selection

Menu selection–user given a number of options listedon a menu, selects one and the system carries out theoption selected or updates its database accordingly, thendisplays another menu; e.g., macOS and applications.

• Instruction sets

Instruction sets–dialogue structured around instructionsets which provide the user with a command language(using structured English, mnemonics or free-formatsyntax; e.g., Unix

• Question-Answer dialogue

Question-Answer dialogue– system-driven (asopposed to user-driven) Q-A easier.

• Graphics-based dialogue structure Graphics-based dialogue structure–monitor+mousecapabilities; uses menus but also many other feature

Trend in Web Navigation (Examples)

1. Horizontal Navigation, horizontal type is a classic design that combines usability and functionality

2. Vertical Navigation, Vertical navigation is an obvious alternative to a horizontal one, where the menu is situated at the left side of the page. Basically, vertical and horizontal designs are interchangeable and sometimes complementary. The choice between them is based on personal preferences and intention of content

3. Slide Out Menu, Slide-out menu is one way to save both full navigation capacity and screen real estate. The menu bar (or side drawer) is hidden beyond the left edge of the screen and revealed only upon the user’s action.

4.Landing page is a task-optimized single-page website with long or infinite scrolling.

5.Fixed Navigation Fixed or sticky navigation is a type of the menu bar that doesn’t disappear when you’re scrolling down: it is attached to a certain part of the page and provides access to the menu at all time.

6.Mega Menu, Mega Menu is a large menu panel that pops-up when tapping or pointing a mouse cursor over the necessary menu section

References :

• http://homepages.inf.ed.ac.uk/da/teach/HCI/dialogue.pdf
• https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/ch04.html
• https://umbrellait.com/website-navigation-design/
• https://usabilitygeek.com/10-guidelines-for-navigation-usability/
• https://www.justinmind.com/blog/navigation-design-almost-everything-you-need-to-know/
• http://www.cs.toronto.edu/~jm/340S/Slides2/HCIDes.pdf

Definisi

Sistem interaktif yang berhasil/sukses dan diyakini akan meningkatkan daya guna (usability) dari sistem tersebut.

Prinsip

Interaksi efektif dari berbagai aspek pengetahuan psikologi, komputasi dan sosiologi mengarahkan peningkatan desain dan evolusi suatu produk yang pada akhirnya akan meningkatkan daya guna sistem tersebut.

Tipe-tipe Paradigma

Jenis paradigma yang mempengaruhi proses perubahan dari teknologi zaman dahulu menjadi teknologi zaman sekarang adalah :

1. Time Sharing
2. Video Unit Display
3. Programming Toolkit
4. Personal Computing
5. Windows System & WIMP
6. Methapor
7. Direct Manipulation
8. Languange Versus Actions
9. Hypertext
10. Multi-modality
11. Computer Supported Cooperation
12. The World Wide Web
13. Agent Based Interfaces
14. Ubiquitous Computing

Contoh Paradigma HCI berdasarkan tema Airport

Perulangan While

While bisa kita artikan selama.

Cara kerja perulangan ini seperti percabangan, ia akan melakukan perulangan selama kondisinya bernilai true.

Struktur penulisan perulangan while:

package package05;

import java.util.Scanner;

public class eSelect1CondIf {

    public static void main(String[] args) {
        // TODO Auto-generated method stub

        int Score;
        String info = "";
        Scanner scScore = new Scanner (System.in);

        // Input
        System.out.println("SMA KEDAULATAN RAKYAT");
        System.out.print ("Input Score = ");
        Score = scScore.nextInt();

        // Process Code
        if (Score >= 55) {
            info = "Success!";
        }

        // Output Code
        System.out.println("Result : " + info);
    }
}

Perulangan Do/While

Cara kerja perulangan Do/While sebenarnya sama seperti perulangan While.

Bedanya, Do/While melakukan satu kali perulangan dulu. Kemudian mengecek kondisinya.

Struktur penulisannya seperti ini:

do {
    // blok kode yang akan diulang
} while (kondisi);

Jadi kerjakan dulu (Do), baru di cek kondisinya while( kondisi ). Kalau kondisi bernilai true, maka lanjutkan perulangan.

Contoh Program dengan Perulangan Do/While

package package07;

import java.util.Scanner;

public class GLooping2DoWhile {

public static void main(String[] args) {
    // TODO Auto-generated method stub

    int number = 1, limit = 0;
    Scanner scLimit = new Scanner (System.in);

    System.out.print("Input Limit : ");
    limit = scLimit.nextInt();

    do {
        System.out.println (number);
        number++;
    }
    while (number <= limit);
}
}

Method adalah fungsi yang berada di dalam Class. Sebutan ini, biasanya digunakan pada OOP.

Cara Membuat Fungsi di Java

Fungsi harus dibuat atau ditulis di dalam class.

Struktur dasarnya seperti ini:

static TypeDataKembalian namaFungsi(){
    // statemen atau kode fungsi
}

Penjelasan:

• Kata kunci static, artinya kita membuat fungsi yang dapat dipanggil tanpa harus membuat instansiasi objek.
• TypeDataKembalian adalah tipe data dari nilai yang dikembalikan setelah fungsi dieksekusi.
• namaFungsi() adalah nama fungsinya. Biasanya ditulis dengan huruf kecil di awalnya. Lalu, kalau terdapat lebih dari satu suku kata, huruf awal di kata kedua ditulis kapital.

Fungsi Static dan Non-Static

Pada contoh-contoh diatas, kita menggunakan kata kunci static sebelum membuat fungsi.

Kata kunci static akan membuat fungsi dapat dieksekusi langsung, tanpa harus membuat instansiasi objek dari class.

package package09;

public class ISayHello {

//method definition
private static void myMethod() {
    System.out.println("Printing from inside myMethod()!");
}

public static void main(String[] args) {
    // TODO Auto-generated method stub

    System.out.println("About to encounter a method,");

    //method call
    myMethod();

    System.out.println("Method was executed successfully!");

}
}

package package09;

import java.util.Scanner;

class nilaiUjian{
private Scanner nilaiUjian;

public void NilaiUjianSiswa (int nilai, String grade) {

    nilaiUjian = new Scanner (System.in);
    System.out.print("Masukkan Nilai Ujian Anda : ");
    nilai=nilaiUjian.nextInt();

    if (nilai >=85 && nilai <=100) {
        grade =     "A";
    }

    else if (nilai >=70 && nilai <85){
        grade =     "B";
    }

    else if (nilai >=55 && nilai <70){
        grade =     "C";
    }

    else if (nilai >=40 && nilai <55) {
        grade =     "D";
    }
    else {
        grade = "E";
    }
    System.out.println("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
    System.out.println("Selamat Datang di Sekolah Entah Kenapa");
    System.out.println("Nilai Anda adalah : " + nilai);
    System.out.println("Grade Anda adalah : " + grade);
    System.out.printf ("Dengan Nilai %d, Peringkat Anda Adalah %s %n", nilai, grade);
    System.out.println("\"TERUS TINGKATKAN PRESTASI ANDA\"");
    System.out.println("^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
}
}

public class TugasNonStatic {

public static void main(String[] args) {
    // TODO Auto-generated method stub

    nilaiUjian saya = new nilaiUjian();
    int nilai = 0;
    String grade = null;
    saya.NilaiUjianSiswa(nilai, grade);

}
}

Dalam pemrograman Java, Selection dikenal juga sebagai decision/percabangan. Lalu apakah itu? dan bagaimana menerapkannya?

Secara definisi adalah suatu pilihan atau opsi dimana terdapat kondisi tertentu yang harus dipenuhi oleh program untuk menjalankan suatu perintah, jika kondisi atau syarat itu terpenuhi maka program akan menjalankan perintahnya tetapi jika tidak maka program tidak akan menjalankan perintahnya atau melewatinya dan melihat kondisi lainnya untuk dijalankan atau berhenti sama sekali.

Dalam Java terdapat 2 jenis Selection, yaitu

1. IF/ELSE
2. SWITCH/CASE

Contoh If & Else

IF: “Jika kondisi benar maka kerjakan ini, kalau tidak silahkan lanjut”

IF/ELSE: “Jika kondisi benar maka kerjakan ini, kalau salah maka kerjakan yang itu, setelah itu lanjut”.

berikut adalah contoh penggunaan perintah If & Else

package package05;

import java.util.Scanner;

public class ETugasIfElse {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    int nilai;
    String ket="";
    Scanner input = new Scanner (System.in);
    System.out.println ("Selamat datang di Penilaian Nilai Matematika Kelompok D : School");
    System.out.print("Input Nilai Siswa : ");
    nilai = input.nextInt();

    if(nilai >= 85 && nilai <=100) {
        ket="A";
    }
    else if(nilai >= 70 && nilai <85) {
        ket="B";
    }
    else if(nilai >= 55 && nilai <70) {
        ket="C";
    }
    else if(nilai >= 40 && nilai <55) {
        ket="D";
    }
    else {
        ket ="E";
    }

    System.out.printf("Dengan nilai %d, Siswa dinyatakan %s %n", nilai, ket);
}
}

Switch Case

Selain menggunakan If Else, selection juga bisa menggunakan perintah Switch Case. Hasilnya sama seperti ketika kita menggunakan perintah If Else, hanya format perintahnya yang berbeda.

Perlu diperhatikan juga bahwa dalam perintah Switch Case terdapat kata kunci break dan default.

• break artinya berhenti. Ini untuk memerintahkan komputer untuk berhenti mengecek case yang lainnya.
• default artinya jika nilai variabel tidak ada yang sama dengan pilihan case di atas, maka kerjakan kode yang ada di dalam default.

Pilihan default bisa juga tidak memiliki break, karena dia adalah pilihan terakhir. Artinya pengecekan akan berakhir di sini.

Berikut merupakan contoh penggunaan perintah Switch Case :

package package06;

import java.util.Scanner;

public class FTugasSwitchCase {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    System.out.println("Berikut ini adalah ekskul Wajib Masing-Masing Kelas di SMA PEMBANGUNAN");
    System.out.print ("Masukkan Kelas Anda ");
    Scanner scEks=new Scanner (System.in);
    String pilihEks="";
    int pEks=scEks.nextInt();

    switch (pEks) {
    case 1 : pilihEks="Renang";
    break;
    case 2 : pilihEks="Panjat Tebing";
    break;
    case 3 : pilihEks="Paskibraka";
    break;
    default:pilihEks="Anda salah memasukkan Kelas!";

    break;
    }

    System.out.printf("%nEkskul Wajib Kelas %d SMA, adalah %s", pEks, pilihEks);
        }
    }

Seperti yang kita ketahui, program komputer terdiri dari tiga komponen utama, yaitu: input, proses, dan output.

• Input: nilai yang kita masukan ke program
• Proses: langkah demi langkah yang dilakukan untuk mengelola input menjadi sesuatu yang berguna
• Output: hasil pengolahan

Semua bahasa pemrograman telah menyediakan fungs-fungsi untuk melakukan input dan output.

Java sendiri sudah menyediakan tiga class untuk mengambil input:

1. Class Scanner;
2. Class BufferReader; dan
3. Class Console

Tiga class tersebut untuk mengambil input pada program berbasis teks (console). Sedangkan untuk GUI menggunakan class yang lain seperti JOptionPane dan inputbox pada form.

Sementara untuk outputnya, Java menyediakan fungsi print(), println(), dan format().

Mengambil Input dengan Class Scanner

Scanner merupakan class yang menyediakan fungsi-fungsi untuk mengambil input dari keyboard.

Agar kita bisa menggunakan Scanner, kita perlu mengimpornya ke dalam kode:

import java.util.Scanner;

3 konsep Printout di Java

Di dalam sebuah program, penting sekali mengetahui bagaimana mencetak sebuah data ke layar. Ini untuk memberikan informasi kepada pengguna tentang data yang telah diproses.

Berikut ini kami lampirkan 3 konsep dasar yang sering dan memang pasti digunakan dalam mencetak data di pemrograman java.

1. Mencetak data dengan format tertentu
2. Mencetak data tanpa format
3. Mencetak data dengan kotak dialog

1. Mencetak data dengan format

ini digunakan untuk menyatakan data sebagai format tertentu. misalnya saya ingin mencetak data numerik maka yang saya perlukan dalam menyisipkan format adalah format untuk nilai numerik seperti integer atau byte. begitupun juga dengan string atau character. berikut adalah listing program yang bisa anda coba :

melihat program di atas kita bisa lihat tipe-tipe pemformatan yang digunakan serta method apa yang di gunakan. program di atas menjelaskan kepada kita bahwa untuk mencetak data dengan format kita menggunakan methode printf() dimana f berarti kepanjangan dari “format”. program di atas juga menyisipkan format-format tertentu sesuai data yang akan di cetak.

• %s dimana format ini berlaku untuk string (untaian kata)
• %c dimana format ini berlaku untuk character
• %d dimana format ini berlaku untuk numerik yang bertipe integer atau byte

2. Mencetak data tanpa format

didalam pemrograman java kita juga bisa mencetak data tanpa format tertentu. memungkinkan program menjalankan fungsi otomatis mengetahui data yang akan kita cetak. ini lebih cepat ketimbang kita menggunakan format tertentu. bisa anda lihat listing program di bawah ini untuk lebih jelasnya :

package package02;

import java.util.Scanner;

public class bDataSiswaIO {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    String nama_siswa, kelas_siswa, alamat;
    int usia;

    Scanner input_data= new Scanner (System.in);

    System.out.println();
    System.out.println("************Data Siswa SMA PEMBANGUNAN BANGSA************");
    System.out.println();
    System.out.print("Nama Siswa : ");

    nama_siswa =input_data.nextLine();

    System.out.print("Kelas : ");

    kelas_siswa = input_data.nextLine();

    System.out.print("Alamat : ");

    alamat=input_data.nextLine();

    System.out.print ("Usia : ");

    usia=input_data.nextInt();

    System.out.println();

    System.out.println("++ OUTPUT DENGAN PERINTAH PRINTLN ++"); 
    System.out.println();
    System.out.println("***********************************");
    System.out.println("Nama Siswa : " + nama_siswa);
    System.out.println("Kelas      : " + kelas_siswa);
    System.out.println("Alamat     : " + alamat);
    System.out.println("Usia       : " + usia + " tahun");
    System.out.println("***********************************");

    System.out.println();
    System.out.println("++ OUTPUT DENGAN PERINTAH PRINTF ++"); 
    System.out.println("====================================");
    System.out.printf("Nama Siswa   = %s %n", nama_siswa);
    System.out.printf("Kelas        = %s %n", kelas_siswa);
    System.out.printf("Alamat       = %s %n", alamat);
    System.out.printf("Usia         = %d tahun %n", usia);
    System.out.println("====================================");

        }

    }

Di program tersebut kita menggunakan method berupa println() dan print(). dimana masing-masing memiliki fungsi yang sama yaitu mencetak (tanpa format) namun juga memiliki perbedaan mendasar. println() adalah method mencetak dimana hasil cetakannya akan otomatis pindah baris tanpa terselubung escape character “\n” untuk pindah baris. sebaliknya untuk method print(). ia tidak otomatis pindah baris, melainkan tetap pada baris yang sama kecuali kita menyisipkan escape character “\n” di dalamnya. berikut adalah hasil dimana program ini di excute :

Array adalah sebuah variabel yang bisa menyimpan banyak data dalam satu variabel.

Indeks array selalu dimulai dari 0 dan perlu diketahui juga, indeks tidak selalu dalam bentuk angka. Bisa juga karakter atau teks.

berikut adalah contoh penggunaan Array dalam pemrograman Java :

List Program :

package08 : HArray1Demo

package package08;

public class HArray1Demo {

public static void main(String[] args) {
    // TODO Auto-generated method stub

    //declaration
    int[] number;

    //constraction
    number = new int[5];

    //initial
    number [0] = 1;
    number [1] = 2;
    number [2] = 3;
    number [3] = 4;
    number [4] = 5;

    //output
    System.out.println("Elemen Array ke 1 = " + number[0]);
    System.out.println("Elemen Array ke 2 = " + number[1]);
    System.out.println("Elemen Array ke 3 = " + number[2]);
    System.out.println("Elemen Array ke 4 = " + number[3]);
    System.out.println("Elemen Array ke 5 = " + number[4]);

    //panjang array
    System.out.println("Panjang array = " + number.length);

}
}

Arrays 2 Dimensi

Array dua dimensi adalah array yang membutuhkan dua index untuk mengidentifikasi elemen tertentu.

Array dua dimensi ini sering digunakan untuk merepresentasikan tabel dari nilai yang terdiri dari informasi yang diatur berdasarkan baris dan kolom. Selain itu, array dua dimensi ini juga dapat digunakan dalam matrix. 

Berikut adalah contoh penggunaan Array 2 Dimensi dalam penulisan Jadwal Pelajaran:

package08 : HArray2DSchool

package package08;

public class HArray2DSchool {

public static void main(String[] args) {
    // TODO Auto-generated method stub
    int rows=6;
    int cols=5;
    String [][] JadwalPelajaran = new String[6][5];

    //Initial
    JadwalPelajaran[0][0]="Senin";
    JadwalPelajaran[0][1]="Selasa";
    JadwalPelajaran[0][2]="Rabu";
    JadwalPelajaran[0][3]="Kamis";
    JadwalPelajaran[0][4]="Jum'at";

    JadwalPelajaran[1][0]="MTK";
    JadwalPelajaran[1][1]="Biologi";
    JadwalPelajaran[1][2]="MTK";
    JadwalPelajaran[1][3]="Geografi";
    JadwalPelajaran[1][4]="Ekonomi";

    JadwalPelajaran[2][0]="Agama";
    JadwalPelajaran[2][1]="Sejarah";
    JadwalPelajaran[2][2]="TIK";
    JadwalPelajaran[2][3]="Kimia";
    JadwalPelajaran[2][4]="Kesenian";

    JadwalPelajaran[3][0]="TIK";
    JadwalPelajaran[3][1]="Sejarah";
    JadwalPelajaran[3][2]="AKT";
    JadwalPelajaran[3][3]="Mulok";
    JadwalPelajaran[3][4]="Mulok";

    JadwalPelajaran[4][0]="TIK";
    JadwalPelajaran[4][1]="Senam";
    JadwalPelajaran[4][2]="LES";
    JadwalPelajaran[4][3]="Agama";
    JadwalPelajaran[4][4]="Agama" ;

    JadwalPelajaran[5][0]="Mulok";
    JadwalPelajaran[5][1]="Kimia";
    JadwalPelajaran[5][2]="LES";
    JadwalPelajaran[5][3]="Bhs.Indo";
    JadwalPelajaran[5][4]="Geografi";


    int i,j;
    System.out.println("JADWAL PELAJARAN KELAS X SMA NEGERI 10");
    System.out.println("--------------------------------------------------------------------------------------------------");
    for (i=0; i<rows; i++) {
        for(j=0; j<cols;j++) {
            System.out.format("| %s | \t ", JadwalPelajaran[i][j]+"\t");
        }
        System.out.println("");
    }
    System.out.println("--------------------------------------------------------------------------------------------------");

}
}

Contoh Arrays menggunakan Matrix

Berikut adalah contoh penggunaan arrays dengan matrix dalam membuat kelompok belajar di sekolah

package package08;

public class HArray2DMatSchool {

public static void main(String[] args) {
    // TODO Auto-generated method stub 
    //Declare + Initial
            String [][] matrix= {
                    {"Kelompok-1","Kelompok-2","Kelompok-3","Kelompok-4"},
                    {"Lyanna Stark","Sansa Stark","Arya Stark","Cersei Lannister"},
                    {"Jon Snow","Theon Greyjoy","Missandei","Tyrion Lannister"},
                    {"Daenerys","Yara Greyjoy","Genry Baratheon","Jemmie Lannister"},               
            };

            //Output //LENGTH hanya membaca baris, tapi tidak membaca kolom, untuk itulah harus di initialization

            System.out.println("                    Pembagian Kelompok Belajar di SMA 10");
            System.out.println("============================================================================");
            for (int row=0; row<matrix.length; row++) {
                    for (int col=0; col<matrix.length; col++) {
                        System.out.print(matrix[row][col] + "\t");
                    }
                    System.out.println("");
                    }
            System.out.println("============================================================================");
}
}