Automatically centered scrolling in a tab-based user interface

A method and apparatus for presenting a tab-based graphic user interface (GUI) having more tabs than can be fitted across a screen side for a computer system. The computer system can be handheld devices such as personal digital assistants (PDA's) and cell phones. The tab-based GUI displays as many tabs as possible on the screen side. The on-screen tabs are arranged in a sequence on a side of the display screen wherein each of these displayed tabs is adapted to be selected by a user for entering into a file category. The off-screen and on-screen tabs form a circular array conceptually such that a portion of the circular array being displayed on the screen side is the sequence of the on-screen tabs. In response to the selection of a on-screen tab, the selected on-screen tab is automatically scrolled to the center position of the screen side. In response to the selection of another on-screen tab, the newly selected on-screen tab is automatically scrolled to the center position of the screen side. Any tab, whether on-screen or off-screen, can eventually be selected by repeatedly selecting a tab on-screen on the left-most position of the screen side until the desired tab is on-screen for selection.

FIELD OF THE INVENTION

The present invention relates to the field of handheld devices. In particular, the present invention relates to a graphic user interface (GUI) well suited for display on handheld devices.

BACKGROUND

In comparison to a typical computer monitor, a handheld device's display screen is more restricted in the amount of information that can be displayed. As such, for a handheld device, efficient use of display area is a non-trivial and pressing issue. Specifically, a general file/folder structure usually implemented for display on a typical computer monitor, is not well suited for display on a handheld device. Thus, for a handheld device to display information with a file/folder structure, a tab-based GUI can facilitate the display of information on a handheld device. In this capacity, the tab-based GUI organizes different files/folders as categories for presentation on the small display screen of the handheld device. These categories are graphically represented as tabs without introducing a large “footprint” on the small display screen.

In particular, users need to be able to switch categories presented on the display screen of a handheld device quickly and easily. Thus, using tabs at the top of the screen to navigate between categories facilitates this end. However, the tab-based GUI can still be somewhat inconvenient if there are more tabs than will fit on the screen at once. What is unresolved is: how to find tabs that do not fit on the display screen.

Prior art approaches add additional GUI elements (such as scroll arrows) to scroll the tabs left and right in order to view all of the tabs. Alternatively, multiple rows of tabs can be displayed. Unfortunately, these prior art solutions leave too large a footprint on the display screen, obscuring other information from being displayed or are inconvenient to use. Thus, these prior art approaches do not provide an acceptable solution for the small screens of handheld devices.

Specifically, these prior art approaches require additional GUI elements, which can be problematic when using small screens. Also, these elements are often small, and therefore harder to activate (by stylus or mouse). Moreover, some implementations always scroll an entire screen width at once. On these systems, if only one more tab exists than will fit on the screen, then a whole screen with the one extra tab will be displayed when the screen is scrolled. Only one tab is on-screen while the remaining majority of tabs are not on-screen. As such, screen area is not efficiently utilized.

SUMMARY

A need exists for a graphic user interface (GUI) that does not leave a “large footprint” on the display screen of a handheld device. A further need exists for a GUI tailored to a handheld device's display screen to select any category efficiently without relying on scrolling an entire screen width at once. Yet another need exists for a GUI tailored to a handheld device's display screen while without using small elements that are difficult to activate by stylus or mouse.

The present invention provides a tab-based GUI that does not waste precious display area on the display screen of a handheld device. The present invention further provides a GUI tailored to a handheld device's display screen to select any category efficiently without relying on scrolling an entire screen width at once. The present invention also provides a GUI tailored to a handheld device's display screen without using small elements that are difficult to activate by a stylus or mouse.

In one embodiment, for a tab-based GUI having more tabs than can fit across a screen dimension for a computer system, as many tabs as possible are displayed on the screen dimension. The tabs on-screen are arranged in a sequence wherein each of these on-screen tabs is adapted to be selected by a user for entering into a file category. In response to the selection of a tab on screen, the selected tab on screen is automatically scrolled to the center position of the screen dimension. In response to the selection of another tab on screen, the newly selected tab on screen is automatically scrolled to the center position of the screen dimension. The computer system can be a handheld device such as a PDA or a cell phone.

In one embodiment, the off-screen tabs together with the on-screen tabs form a circular array conceptually such that a portion of the circular array being displayed on the screen dimension contains at its center the last-selected tab. As such, whether on-screen or off-screen, any tab can be eventually selected by repeatedly selecting the right-most tab on screen. Similarly, any tab can be eventually selected by repeatedly selecting the left-most tab on screen. In one embodiment, the currently selected on-screen tab is visibly high lighted.

DETAILED DESCRIPTION OF THE FIGURES

Notation and Nomenclature:

Platform for Handheld Devices:

FIG. 1illustrates a system50comprising computer systems (56,58and100) upon which embodiments of the present invention may be practiced. Specifically, host computer system56can either be a desktop unit as shown, or, alternatively, can be laptop computer system58. Optionally, one or more host computer systems can be used within system50. Host computer systems58and56are shown connected to a communication bus54, which in one embodiment can be a serial communication bus, but could be of any of a number of well known designs, e.g., a parallel bus, Ethernet Local Area Network (LAN), etc. Optionally, bus54can provide communication with the Internet52using a number of well known protocols.

Importantly, bus54is also coupled to a cradle60for receiving and initiating communication with a palm top (“palm-sized”) portable computer system such as handheld computer system100. Cradle60provides an electrical and mechanical communication interface between bus54(and anything coupled to bus54) and computer system100for two way communications. Computer system100also contains a wireless infrared communication mechanism64for sending and receiving information from other devices.

FIG. 2Ais a perspective illustration of the top face100aof one embodiment of the palmtop computer system. It is appreciated that the GUI of the present invention can be realized on any number of computer systems and that system100is exemplary only. The top face110acontains a display screen105surrounded by a bezel or cover. A removable stylus80is also shown. The display screen105is a touch screen able to register contact between the screen and the tip of the stylus80. The stylus80can be of any material to make contact with the screen105. The top face100aalso contains one or more dedicated and/or programmable buttons75for selecting information and causing the computer system to implement functions. The on/off button95is also shown.

FIG. 2Aalso illustrates a handwriting recognition pad or “digitizer” containing two regions106aand106b. Region106ais for the drawing of alpha characters therein for automatic recognition (and generally not used for recognizing numeric characters) and region106bis for the drawing of numeric characters therein for automatic recognition (and generally not used for recognizing numeric characters). The stylus80is used for stroking a character within one of the regions106aand106b. The stroke information is then fed to an internal processor for automatic character recognition. Once characters are recognized, they are typically displayed on the screen105for verification and/or modification.

The digitizer160records both the (x, y) coordinate value of the current location of the stylus and also simultaneously records the pressure that the stylus exerts on the face of the digitizer pad. The coordinate values (spatial information) and pressure data are then output on separate channels for sampling by the processor101(seeFIG. 5). In one implementation, there are roughly 256 different discrete levels of pressure that can be detected by the digitizer106. Since the digitizer's channels are sampled serially by the processor, the stroke spatial data are sampled “pseudo” simultaneously with the associated pressure data. The sampled data is then stored in a memory by the processor101(seeFIG. 5) for later analysis.

FIG. 2Billustrates the bottom side100bof one exemplary embodiment of the palmtop computer system. An optional extendible antenna85is shown and also a battery storage compartment door90is shown. A communication interface108is also shown. In one embodiment of the present invention, the serial communication interface108is a serial communication port, but could also alternatively be of any of a number of well known communication standards and protocols, e.g., parallel, SCSI, Firewire (IEEE 1394), Ethernet, etc.

FIG. 3is an exploded view of exemplary palmtop (handheld) computer system100in accordance with one implementation. System100contains a front cover210having an outline of region106and holes75afor receiving buttons75b. A flat panel display105(both liquid crystal display and touch screen) fits into front cover210. Any of a number of display technologies can be used, e.g., LCD, FED, plasma, etc., for the flat panel display105. The touch screen can be a digitizer. A battery215provides electrical power. A contrast adjustment (potentiometer)220is also shown. On/off button95is shown along with an infrared emitter and detector device64. A flex circuit230is shown along with a PC board225containing electronics and logic (e.g., memory, communication bus, processor, etc.) for implementing computer system functionality. The digitizer pad is also included in PC board225. A midframe235is shown along with stylus80. Position adjustable antenna85is shown.

A radio receiver/transmitter device240is also shown between the midframe and the rear cover245ofFIG. 3. The receiver/transmitter device240is coupled to the antenna85and also coupled to communicate with the PC board225. In one implementation, the Mobitex wireless communication system is used to provide two way communication between system100and other networked computers and/or the Internet via a proxy server. In other embodiments, TCP protocol can be used.

FIG. 4is a perspective illustration of one embodiment of the cradle60for receiving the palmtop computer system100. Cradle60contains a mechanical and electrical interface260for interfacing with serial connection108(FIG. 3B) of computer system100when system100is slid into the cradle60in an upright position. Once inserted, button270can be pressed to initiate two way communication between system100and other computer systems coupled to serial communication265.

FIG. 5illustrates circuitry of exemplary computer system100, some of which can be implemented on PC board225. Computer system100includes an address/data bus108for communicating information, a central processor101coupled with the bus for processing information and instructions, a volatile memory102(e.g., random access memory RAM) coupled with the bus108for storing information and instructions for the central processor101and a non-volatile memory103(e.g., read only memory ROM) coupled with the bus108for storing static information and instructions for the processor101. Computer system110also includes an optional data storage device104(e.g., memory stick) coupled with the bus108for storing information and instructions. Device104can be removable. As described above, system100also contains a display device105coupled to the bus108for displaying information to the computer user. PC board225can contain the processor101, the bus108, the ROM103and the RAM102.

Also included in exemplary computer system100ofFIG. 5is an alphanumeric input device106which in one implementation is a handwriting recognition pad (“digitizer”) having regions106aand106b(FIG. 2A), for instance. Device106can communicate information (spatial data and pressure data) and command selections to the central processor101. System100also includes an optional cursor control or directing device107coupled to the bus for communicating user input information and command selections to the central processor101. In one implementation, device107is a touch screen device incorporated with screen105. Device107is capable of registering a position on the screen105where the stylus makes contact and the pressure of the contact. The display device105utilized with the computer system100may be a liquid crystal device, cathode ray tube (CRT), field emission device (FED, also called flat panel CRT) or other display device suitable for creating graphic images and alphanumeric characters recognizable to the user. In the preferred embodiment, display105is a flat panel display.

Signal communication device109, also coupled to bus108, can be a serial port for communicating with the cradle60. Device109can also include an infrared communication port.

FIG. 6is a front view of the exemplary palmtop computer system100with a menu bar305open displaying a pull down window. Also shown are two regions of digitizer106aand106b. Region106ais for receiving user stroke data (and pressure data) for alphabet characters, and typically not numeric characters, and region106bis for receiving user stroke data (and pressure data) for numeric data, and typically not for alphabetic characters. Physical buttons75are also shown. Although different regions are shown for alphabetic and numeric characters, the present invention is also operable within a single region that recognizes both alphabetic and numeric characters.

FIG. 7is a front view of the exemplary palmtop computer system100with several display windows open on-screen105including a virtual keyboard window315. The user has the choice of displaying a virtual keyboard image on-screen105and entering characters by selecting one of the displayed characters of the virtual keyboard image. Window310is part of a generic application program executing on system100. Window310is a data entry window in that the application program is requesting information to be entered by a user. The information requested and the application program could be any information and any program. Typically, data entry window310has at least one data entry field312for accepting character data therein. When not entering data using the virtual keyboard315, the user can stroke a character within pad106(either region106aor106b) or on-screen105. The recognized character is then also placed into the displayed data entry field for user verification and use. This process can be repeated.

It is appreciated that, in one embodiment, the digitizer region106aand106bis separate from the display screen105and therefore does not consume any display area.

Automatic Tab Scrolling:

FIG. 8Adepicts a tab-based GUI800that includes a tab display area810on display screen105, and a tab-associated-information display area820on display screen105. In the present embodiment, tabs are indexed by alphabets. However, other types of tab index such as file names can be used. Not all tabs can be displayed in tab display area810. As such, the tabs can be classified into on-screen tabs and off-screen tabs. As shown, not all tabs are displayed. Rather, as shown inFIG. 8A, the only on-screen tabs are tabs ‘P’, ‘Q’, ‘R’, ‘S’, and ‘T’ being displayed in tab display area810. These tabs can be selected by a user for entering into a file category associated with a selected tab. Specifically, a user can select an on-screen tab for displaying information related to the selected on-screen tab. This information is displayed in tab-associated-information display area820.

Continuing withFIG. 8A, the center tab ‘R’ is shown highlighted to indicate that it is the most recently selected tab, or that it is the default tab. Additionally, tab-associated-information display area820displays the information related to tab ‘R’. An example of tab-associated-information can be phone lists. Particularly, when tab ‘R’ is selected and thus highlighted, people's last name that begins with the letter ‘R’ would be displayed in tab-associated-information display are820.

Referring now toFIG. 8B, the same tab-based GUI800is shown with a different set of on-screen tabs. Again, not all tabs are displayed in tab display area810. Rather, as shown inFIG. 8B, the only on-screen tabs are tabs ‘N’, ‘O’, ‘P, ‘Q’, and ‘R’ being displayed in tab display area810. These on-screen tabs can be selected by a user for entering into a file category associated with a selected tab. A user can select an on-screen tab for displaying information related to the selected on-screen tab. This information is displayed in tab-associated-information display area820.

Continuing withFIG. 8B, the center tab, tab ‘P’, is shown highlighted to indicate that it is the most recently selected tab, or that it is the default tab. Additionally, tab-associated-information display area820displays the information related to tab ‘P’. An example of tab-associated-information can be phone lists. Particularly, when tab ‘P’ is selected and thus highlighted, people's last name that begins with the letter ‘P’ would be displayed in tab-associated-information display are820.

Referring now to bothFIGS. 8A and 8B, as understood herein, the selection of an on-screen tab need not be indicated through highlighting the tab. For example, in an alternative embodiment, the selected tab takes on a shape that is different from unselected tabs. In so doing, the selected tab indicates that it is being selected. Also, as understood herein, the selection of an on-screen tab can be performed in a variety of ways that include: by hand touch, by a stylus, by key board entry, etc. Moreover, a tab display area such as tab display area810need not be limited to the top of display screen105. For example, in an alternative embodiment, a tab display area is located on the left side of display screen105.

Referring now toFIG. 8C, a flow chart888is shown outlining steps in one embodiment of the present invention.

In step870, as many tabs as can fit across the top of the display screen are displayed as on-screen tabs wherein a default tab is selected. Specifically, on-screen tabs together with off-screen tabs are arranged as a tab array. When not all tabs can fit into a tab display area of the display screen, a portion of the tab array is displayed. As understood herein, tabs need not be fitted across the top of the display screen. For example, in an alternative embodiment, tabs are fitted across the left side of the display screen.

In step875, a window of information associated with the default tab is displayed.

In step880, user selects an on-screen tab from among the on-screen tabs.

In step885, a different set of on-screen tabs are automatically scrolled into the tab display area, i.e., another portion of the tab array is displayed. Specifically, the user's selected tab is automatically scrolled and positioned in the center of the top side of the display screen.

In step890, a window of information associated with the selected tab is displayed. In turn, step880is performed again.

FIG. 9Adepicts how tabs are conceptually arranged as a circular array910for display in accordance with one embodiment of the present invention. As shown, tabs that are indexed by the entire alphabets are conceptually arranged into circular array910. As such ‘A’ is diametrically opposite-‘N’, ‘B’ is diametrically opposite ‘O’, ‘Z’ is diametrically opposite ‘M’ etc. Also because of circular array810, once the end of the alphabet ‘Z’, is reached, ‘A’ is positioned next to ‘Z’ to repeat the alphabets again.

Continuing withFIG. 9A, a conceptual frame920is shown to include alphabets ‘YZABC.’ Specifically, conceptual frame920encloses alphabets that correspond to indices of the on-screen tabs. For example, as shown enclosed in conceptual frame920, alphabets ‘YZABC’ correspond to the indices of the five tabs (‘Y tab, ‘Z’ tab, ‘A’ tab, ‘B’ tab and ‘C’ tab) that are on-screen on the top side of display screen105, namely tab display area810.

FIG. 9Bdepicts how tabs, in response of a newly selected tab on screen, are conceptually arranged as circular array910for display in accordance with the embodiment presented inFIG. 9A. In response to the newly selected tab (in this case, ‘Y’ tab), conceptual frame920now encloses a different portion of circular array910wherein ‘Y’ is position in the center of conceptual frame920. As shown enclosed in conceptual frame820, ‘WXYZA’ correspond to the indices of the five tabs (‘W’ tab, ‘X’ tab, ‘Y’ tab, ‘Z’ tab and ‘A’ tab) that are on screen on the top side of display screen105, namely tab display area810.

Referring now to bothFIGS. 9A and 9B, from a user's point of view, the selected ‘Y’ tab has been moved from the left-most position relative to the top side of display screen105(as shown inFIG. 9A) to the center position relative to the top side of display screen105(as shown inFIG. 9B). In effect, upon its selection, ‘Y’ tab is automatically scrolled to the center of the top side of display screen105. However, automatic scrolling need not place the selected tab to the center of the top side of the display screen. For example, in an alternative embodiment, the selected tab is automatically scrolled to the right most position of the top side of display screen105.

Moreover, still referring to bothFIGS. 9A and 9B, any tab can be eventually displayed by repeating a simple procedure. That is, a user can just repeatedly select the left most tab on-screen until the desired tab is on-screen. Likewise, any tab can be eventually reached by repeatedly selecting the right-most tab on-screen until the desired tab is on-screen.

As understood herein, tabs do not need to be displayed on the top side of display screen105. For example, in an alternative embodiment, tabs are displayed on the left side of display screen105. That is, tab display area810can be on the left side of display screen105.

FIG. 10is a flow chart1000outlining steps performed for automatic scrolling in accordance with one embodiment of the present invention.

In step1010, as many tabs as possible are displayed on the top side of a screen of a computer system. The computer system in the present embodiment is a handheld device such as a cell phone or a PDA. As understood herein, tabs need not be fitted across the top of the display screen. For example, in an alternative embodiment, tabs are displayed across the left side of the display screen.

In query step1020, if no tab is to be selected, then query step1020is performed again. Otherwise, if a tab is to be selected, then query step1030follows.

In query step1030, if the desired tab is not on-screen on the top side of the screen, then step1060is performed.

In step1060, the left-most tab on-screen is selected.

In step1070, the selected left-most tab is automatically scrolled to the center of the top side of the screen. Then, query step1030is performed again. As understood herein, in an alternative embodiment, step1060and step1070can be performed by selecting the right-most tab instead of selecting the left-most tab.

In query step1030, if the desired tab is on-screen on the top side of the screen, then step1040is performed.

In step1040, the desired tab is selected.

In step1050, the selected desired tab is automatically scrolled to the center of the top side of the screen. Then query step1020is performed again.

FIG. 11Adepicts how tabs are conceptually arranged as a linear array for display in accordance with one embodiment of the present invention. As shown, tabs that are indexed by the entire alphabets are conceptually arranged into linear array1110. As such ‘A’ is positioned at the beginning of linear array1110. ‘A’ is followed by ‘B’, ‘C’, and so on until ‘Z’ as the end of linear array1110. In contrast to circular array910ofFIGS. 9A and 9B, ‘A’ within linear array1110is not positioned next to ‘Z’ to repeat the alphabets again.

Continuing withFIG. 11A, a conceptual frame1120is shown to include alphabets ‘PQRST’. Specifically, conceptual frame1120encloses alphabets that correspond to indices of the tabs on-screen. For example, as shown enclosed in conceptual frame1120, alphabets ‘PQRST’ correspond to the five tabs (‘P’ tab, ‘Q’ tab, ‘R’ tab, ‘S’ tab and ‘T’ tab) that are on-screen on the top side of display screen105, namely tab display area810.

FIG. 11Bdepicts how tabs, in response of a newly selected tab on-screen, are conceptually arranged as linear array1110for display in accordance with the embodiment presented inFIG. 11A. In response to the newly selected tab (‘P’ tab in this case), conceptual frame1120now encloses a different portion of linear array1110wherein ‘P’ is positioned in the center of conceptual frame1120. What are enclosed in conceptual frame1120(i.e., ‘NOPQR’) correspond to the indices of the five tabs (‘N’ tab, ‘O’ tab, ‘P’ tab, ‘Q’ tab and ‘R’ tab) that are on-screen on the top side of display screen105, namely tab display area810.

Referring now to bothFIGS. 11A and 11B, from a user's point of view, the selected ‘P’ tab has been moved from the left-most position relative to the top side of display screen105(as shown inFIG. 11A) to the center position relative to the top side of display screen105(as shown in FIG.11B). In effect, upon its selection, ‘P’ tab is automatically scrolled to the center of the top side of display screen105, namely tab display area810.

Moreover, still referring to bothFIGS. 11A and 11B, any tab can be eventually displayed by repeating a simple procedure. That is, a user can just repeatedly select either the left-most or the right-most tab on screen until the desired tab is on screen for selection.

Referring now toFIG. 11C, a scenario is depicted wherein the selected tab is not scrolled automatically to the center of tab display area810. In particular, as shown, in response to the newly selected tab (in this case, ‘Z’ tab), conceptual frame1120now encloses a different portion of linear array1110. What are enclosed in conceptual frame1130(i.e., ‘VWXYZ’) correspond to the indices of the five tabs (‘V’ tab, ‘W’ tab, ‘X’0tab, ‘Y’ tab and ‘Z’ tab) that are on-screen on the top side of display screen105, namely tab display are810.

Continuing withFIG. 11C, ‘Z’ tab is not positioned at the center but rather at the very right end of tab display area810. ‘Z’ tab is not automatically scrolled to the center of tab display area810because ‘Z’ as an alphabet is situated at the end of linear array1110, wherein no more alphabet continues to the right side of ‘Z’. Thus, in order to display as many on-screen tabs as possible, ‘Z’ tab is automatically scrolled to the very right end of tab display area810such that ‘V’ tab, ‘W’ tab, ‘X’ tab, ‘Y’ tab and ‘Z’ tab are displayed in tab display area810.

As understood herein, tabs do not need to be displayed on the top side of display screen105. For example, in an alternative embodiments, tabs are displayed on the left side of display screen105. That is, tab display area can be on the left side of display screen105.

In summary, advantageously, the present invention provides a tab-based GUI that does not leave a “large footprint” on the display screen of a handheld device. The present invention further provides a GUI tailored to a handheld device's display screen to select any category efficiently without relying on scrolling an entire screen width at once. The present invention also provides a GUI tailored to a handheld device's display screen without using small elements that are difficult to activate by stylus or mouse.