Generic model to design the GUI for an application.

  • (2 Pages)
  • +
  • 1
  • 2

16 Replies - 338 Views - Last Post: 13 January 2019 - 01:31 PM

#1 Leonido1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-January 19

Generic model to design the GUI for an application.

Posted 11 January 2019 - 08:51 AM

I just thought about an idea for a generic model to design graphical user interface. I would would like to hear your opinion.

The idea:

The method is based on the idea that the GUI of a system can be modeled as tree, where every node represents a window and every edge represent a navigation option. Every leave node represents a functional window which allows the user to achieve his use case and the non-leave node represent a navigation menu. The best way to illustrate this will be via an example.

Assuming we want to implement the GUI of a system with the following use cases:Show transactions over time, Show transactions per user, Update user information, Add transaction, Add user.

The matching tree will be

Explanation: in the following example we can see the root node will be the main menu of our system that will have three navigation options view, update, add. View represents a menu with two navigation options view transaction over time and view transactions per user. Update node represent a menu with only one option update user (still we would like to keep this menu in case there will be additional update use cases in the future). Add represents a menu with two navigation options add user and add transaction.

Is This A Good Question/Topic? 0
  • +

Replies To: Generic model to design the GUI for an application.

#2 Leonido1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-January 19

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 08:53 AM

I just thought about an idea for a generic model to design graphical user interface. I would would like to hear your opinion.

The idea:

The method is based on the idea that the GUI of a system can be modeled as tree, where every node represents a window and every edge represent a navigation option. Every leave node represents a functional window which allows the user to achieve his use case and the non-leave node represent a navigation menu. The best way to illustrate this will be via an example.

Assuming we want to implement the GUI of a system with the following use cases:Show transactions over time, Show transactions per user, Update user information, Add transaction, Add user.

The matching tree will be

link:https://drive.google.com/open?id=1qAxjD6kJzfPoPjJhk_6xk7-i89kZl7sS

Explanation: in the following example we can see the root node will be the main menu of our system that will have three navigation options view, update, add. View represents a menu with two navigation options view transaction over time and view transactions per user. Update node represent a menu with only one option update user (still we would like to keep this menu in case there will be additional update use cases in the future). Add represents a menu with two navigation options add user and add transaction.
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14685
  • View blog
  • Posts: 58,683
  • Joined: 12-June 08

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 09:02 AM

Why a tree and not just a graph?
Was This Post Helpful? 0
  • +
  • -

#4 Leonido1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-January 19

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 09:22 AM

View Postmodi123_1, on 11 January 2019 - 09:02 AM, said:

Why a tree and not just a graph?

because the model is based on a tree that have leaves(nodes with degree one) that represent functional windows and none leaves nodes that represent navigation windows. a general graph doesn't fit into this model because it can have circles that represent a navigation path that does not leads to a leave(functional window).
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14685
  • View blog
  • Posts: 58,683
  • Joined: 12-June 08

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 09:28 AM

*shrug* I guess I don't see it. State diagrams work well, are flexible, and show complex actions. This seems quite.. shallow.
Was This Post Helpful? 0
  • +
  • -

#6 Leonido1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-January 19

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 09:34 AM

View Postmodi123_1, on 11 January 2019 - 09:28 AM, said:

*shrug* I guess I don't see it. State diagrams work well, are flexible, and show complex actions. This seems quite.. shallow.

great we can create a state diagram based on this template.
Was This Post Helpful? 0
  • +
  • -

#7 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14685
  • View blog
  • Posts: 58,683
  • Joined: 12-June 08

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 09:35 AM

*shrug* Ok?
Was This Post Helpful? 0
  • +
  • -

#8 Skydiver   User is online

  • Code herder
  • member icon

Reputation: 6657
  • View blog
  • Posts: 22,740
  • Joined: 05-May 12

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 10:38 AM

Leonido1: There is no need to quote the post above yours. Just use the big Reply button or the Fast Reply area.

Anyway, with this scheme of yours, how are toolbar buttons and hotkeys/shortcuts if the buttons/hotkey/shortcut goes a specific view that is also navigable by your menuing system? Since you now have "leaf" nodes with more than one parent. I think that breaks the definition of a tree, and you now have a graph instead.
Was This Post Helpful? 0
  • +
  • -

#9 Leonido1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-January 19

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 11:31 AM

This model ignores the hotkeys and toolbars, it deals only with the navigable menuing system, you can have them both side by side.
Was This Post Helpful? 0
  • +
  • -

#10 Skydiver   User is online

  • Code herder
  • member icon

Reputation: 6657
  • View blog
  • Posts: 22,740
  • Joined: 05-May 12

Re: Generic model to design the GUI for an application.

Posted 11 January 2019 - 01:39 PM

I see.

How about the Edit.Find... and Edit.Find and Replace... menu options which bring up a modeless dialog box and at the same time bring you back to the primary view. For an example, start Notepad, type some text, and then select Edit.Find... The user can choose between putting the focus is the Find dialog box or in the main editing screen.
Was This Post Helpful? 0
  • +
  • -

#11 Skydiver   User is online

  • Code herder
  • member icon

Reputation: 6657
  • View blog
  • Posts: 22,740
  • Joined: 05-May 12

Re: Generic model to design the GUI for an application.

Posted 12 January 2019 - 05:15 PM

And how does this "tree" model dimissing the "add user" dialog box or view to go back to the "view transactions over time"? Is there an implicit edge from any leaf back to the root?
Was This Post Helpful? 0
  • +
  • -

#12 Leonido1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-January 19

Re: Generic model to design the GUI for an application.

Posted 13 January 2019 - 02:27 AM

Every window will have and option return back to the parent node and return to root node like in the cmd /shell navigation. but those option are not represented as an edge because every window will have them.
Was This Post Helpful? 0
  • +
  • -

#13 Skydiver   User is online

  • Code herder
  • member icon

Reputation: 6657
  • View blog
  • Posts: 22,740
  • Joined: 05-May 12

Re: Generic model to design the GUI for an application.

Posted 13 January 2019 - 07:39 AM

Including the File.Exit menu option that quits out of the program? Does that also have an option to go back to the root?
Was This Post Helpful? 0
  • +
  • -

#14 Skydiver   User is online

  • Code herder
  • member icon

Reputation: 6657
  • View blog
  • Posts: 22,740
  • Joined: 05-May 12

Re: Generic model to design the GUI for an application.

Posted 13 January 2019 - 07:59 AM

View PostLeonido1, on 13 January 2019 - 04:27 AM, said:

those option are not represented as an edge because every window will have them.

But in your post #1, you said that every edge shows a navigation option. So there is a navigation option to the root, but there is no edge?
Was This Post Helpful? 0
  • +
  • -

#15 Leonido1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 11-January 19

Re: Generic model to design the GUI for an application.

Posted 13 January 2019 - 12:32 PM

There are navigation option to root and parent for every node, therefore we don't need to show this in the model because we know they are there. we want the model to be as clear and simple as possible just as in representing the file system as a tree we don't specify that we can get to the root from every directory wit cd command.

file system model example: http://cseweb.ucsd.e...inux-filepaths/
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2